图解css3:核心技术与案例实战. 3.1 CSS3边框简介
3.1 CSS3边框简介
border属性在CSS1中就已经定义了,使用它可以设置元素的边框风格,例如设置不同的边框颜色以及粗细。在详细介绍CSS3边框运用之前,先简单回顾边框属性。
3.1.1 边框的基本属性
CSS1和CSS2中的边框属性其实很简单,其主要包括三个类型值。
border-width:设置元素边框的粗细。
border-color:设置元素边框的颜色。
border-style:设置元素边框的类型。
在实际中可以将上面三个属性合并在一起,其缩写的语法:
border: border-width border-style border-color;
缩写后的每个属性之间使用空格隔开,而且它们之间没有先后顺序,可这里三个值中唯一需要的值是“border-style”,因此,要是这样写边框样式将会没有任何效果。
.elm {border:3px red}
此时浏览器将“border-style”解析成为“none”。要是这样设置,这个时候元素的边框是实线,粗线将是其默认值。
.elm{border:solid}
边框border-width的默认值是“medium”(大约等于3~4px);border-color的默认色就是字体的颜色。
在Web实际制作之中,时常只为了方便使用,CSS中的border可以给不同的边设置不同的风格,其也遵守“TRBL”原则(Top/Right/Bottom/Left),例如单独写边框类型。
border-top-style:/*设置元素顶部边框类型*/
border-right-style:/*设置元素右边边框类型*/
border-bottom-style:/*设置元素底部边框类型*/
border-left-style:/*设置元素左边边框类型*/
上面是边框类型的扩展写法,同样的道理,border-color和border-width也可以像上面一样使用。除了上面的写法之外,还有一种简写形式。
border-style: solid;
/*一个值时,表示四条边都solid类型*/
border-style: solid dotted;
/*两个值时,第一个值表示元素上下边框类型,第二值表示左右边框类型*/
border-style:solid dotted dashed;
/*三个值时,第一个值表示元素顶边的类型,第二个值表示左右边框类型,第三个值表示底部边框类型*/
border-style: solid dotted dashed inset;
/*四个值时,第一个值表示元素顶边的类型,第二个值表示元素右边框类型,第三个值表示元素底边的类型,第四个值表示元素左边框类型*/
同样的原理,border-color和border-width具有一样的使用方法。如果只需要设置元素某部分具有边框效果,我们可以合成起来。
li {
border: 1px solid red;border-width: 1px 0;
}
仅两行代码就表达出元素li顶部和底部都有一条1px的红色实线。这样方便维护代码,并且提升CSS性能。
3.1.2 边框的类型
CSS中使用border-style为元素border定义边框类型,常见的有实线“solid”、虚线“dashed”、点状线“dotted”等。下面一起看看CSS中border-style的几种类型效果,如
表3-1所示。
表3-1 border-style值列表
属性值 功能描述 示例代码 效果
none 定义无边框 .elm {border:none;} none
hidden 与“none”相同。不过应用于表时除外,对于表,hidden用于解决边框冲突 .elm{border:hidden;} hidden
dotted 定义点状边框 .elm{border:3px dotted red ;}
dashed 定义虚线边框 .elm{border:3px dashed red;}
solid 定义实线边框 .elm{border:3px solid red;}
double 定义双线。双线的宽度等于border-width的值 .elm{border:3px double red;}
groove 定义3D凹槽边框,其效果取决于border-color的值 .elm{border:3px groove red;}
ridge 定义3D垄状边框,其效果取决于border-color的值 .elm{border:3px ridge red;}
inset 定义3D inset边框,其效果取决于border-color的值 .elm{border:8px inset red;}
outset 定义3D outset边框,其效果取决于border-color的值 .elm{border:8px outset red;}
inherit 规定应该从父元素继承边框样式。部分浏览器不支持这个属性值
上面11个值在各浏览器下呈现的效果均有差异,其中最不可预测的边框样式是double。它定义为两条线的宽度加上这两条线之间的空间等于border-width值。而dotted、dashed、outset和inset在不同的浏览器下也无法保证一致,如图3-1所示。
图3-1 border-style各浏览器渲染效果
注
意 图3-1中IE 7和IE 8未使用原生IE 测试,而是使用了IE 9自带的IE 7、IE 8进行的测试。
3.1.3 谁在使用CSS3边框
CSS3增强的边框样式具有强大的生命力,灵活使用这些属性可以设计很多优美精巧的UI界面效果。这些属性谁在使用呢?
border-color受制于浏览器兼容性,至今在项目中使用该属性的项目几乎不存在。
border-image浏览器的支持度强一些,但运用在项目中仅存在一些前端爱好者的blog中。
border-radius得到浏览器的强大支持,在互联网上随处可见。
box-shadow,目前在Web页面上CSS3的盒子阴影特性应用非常广泛。
CSS(二)——Flex布局 边框 渐变 过渡 动画 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
零基础CSS入门教程(13)——边框样式 可以通过border-style设置边框样式,常用的有solid实线、dotted点线、dashed虚线三种。大家想必发现了,我们在设定边框样式时,一般都会同时设定边框样式、宽度、颜色,如果逐一定义,比较麻烦。我们前几个小结学习了有序列表无序列表,我们这一小节学习一下边框样式很重要的一个知识点。我们本小节学习了边框样式,内容有点多,大家要学会熟练使用,我们在开发中很常用。可以通过border-width调整边框的宽度,单位一般使用px像素。可以使用bolder-color指定边框的颜色,
CSS边框样式详解 border-color属性用于定义边框的颜色 简写形式: 想要为一个元素定义边框,我们需要完整地给出border-width、border-style和bordercolor。这种写法代码量过多,费时费力。不过CSS为我们提供了一种简写形式
相关文章
- Python-装饰器-案例-获取文件列表
- RMAN备份:一个典型的增量备份案例如下:
- 7.1.4 ScrollView结合案例详解
- 线程池-案例1
- token 案例,只是测试,功能并不完善(只是看看token 到底是何方神圣)
- Python语言学习:Python语言学习之容器(列表&元组&字典&集合)简介、特点/意义/经验总结及容器魔法方法(定义可变&不可变容器的协议)的简介、案例应用之详细攻略
- C++:C++编程语言学习之函数/结构体和类的简介、案例应用之详细攻略
- AI:大力出奇迹?Bigger is better?AI下一代浪潮?预训练大语言模型的简介(起源/目的/概述/技术基础/核心/影响/优缺点/未来趋势)、发展史、模型分类及其对比、案例应用之详细攻略
- 史上最全的2022年最新版软件测试面试题集锦(含答案+案例分析)【三】,再战金九银十
- 机器学习案例学习【每周一例】之 Titanic: Machine Learning from Disaster
- 前端案例:像素鸟小游戏(js+dom操作,完整代码,附案例素材)
- a6.ansible 生产实战案例 -- chrony服务端roles
- 史上最全的2022年最新版软件测试面试题集锦(含答案+案例分析)【五】,再战金九银十