图解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的盒子阴影特性应用非常广泛。

上一篇:.NET 云原生架构师训练营(模块二 基础巩固 MongoDB 聚合)--学习笔记


下一篇:.NET 云原生架构师训练营(模块二 基础巩固 MongoDB 介绍和基础)--学习笔记