你的位置:首页 > 网页设计

[网页设计]CSS3边框温故


1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框、颜色、粗细

2.基本属性,包括三个类型值:
(1)border-width:设置元素边框的粗细,默认3~4px
(2)border-color:设置元素边框的颜色,默认色就是字体颜色
(3)border-style:设置元素边框的类型,默认【none】
缩写语法:border:border-width border-style border-color;
注:缩写后每个属性之间使用空格隔开,它们之间没有先后顺序

3.在Web实际制作之中,CSS中border可以给不同的边设置不同的风格,其遵守【TRBL】原则(Top/Right/Bottom/Left),单独写法:
border-top-style(设置元素顶部边框类型)
border-right-style(设置元素右边边框类型)
border-bottom-style(设置元素下边边框类型)
border-left-style(设置元素左边边框类型)
同理:border-color和border-width都可以单独设定
注:这种单独设定方式,分为四种情况:(1)一个值的时候,表示四条边设定相同(2)两个值的时候,第一个值表示上下边,第二个值表示左右边(3)三个值的时候,第一个值表示上边,第二个值表示左右,第三个值表示下边(4)四个值得时候,遵循上、右、下、左,顺时针方向设定
超级组合大法:li{border:solid 1px red;border-width:1px 0;},仅两行代码就表达出元素li顶部和底部都以一条1px的红色实线。这样方便维护代码,并且提升CSS性能
超级组合大法引起的思考:突然觉得灵光一闪,自己天天使用border可以说达到了游刃有余的地步,但是自己却从来没有分类的去思考过它,真是万分惭愧,写下来与大家共勉
(1)元素设置一条描边:这种情况使用border-T/R/B/L方法设置为优
(2)元素设置两条描边(位置为对立或相连):这种情况使用组合大法为优
(3)元素设置三条描边:这种情况使用组合大法为优
(4)元素设置四条描边:这种情况使用组合大法为优
当然还有这些是在描边都一样的前提下,不一样的时候就分别给不同的属性使用T/R/B/L就可以了
总结:以后对于问题的思考应该分层次,分类,从不同的角度审视

4.边框的类型:border-style值列表

上面11个值在各浏览器下呈现的效果均有差异,其中最不可预测的边框样式是double,两条线的宽度和线之间的宽度无法确定。而dotted、dashed、outset和inset在不同的浏览器下也无法保证一致

CSS3边框还有哪些:border-image、border-radius、box-shadow

5.border-radius设置
遵循TRBL规则(Top/Right/Bottom/Left),可以设置1、2、3、4种值,是圆的四分之一
eg:border-radius:60px 40px 30px 20px;
单独设置水平和垂直半径值:(是椭圆的四分之一)
border-radius:60px 40px 30px 20px / 30px 20px 10px 5px;

6.特殊应用
(1)border-radius还有一个内半径和外半径的区别,元素边框值较大时,效果就很明显。当border-radius半径值小于或等于border的厚度时,元素边框内部就不具有圆角效果

元素的内半径 = 外半径 -边框宽度

(2)第二种是,元素相邻边有不同的宽度,这个角将会从宽的边平滑过渡到窄的一边,其中一条边甚至可以是0,元素相邻转角是由大向小转

还有,图片应用圆角,表格应用圆角,其实可以不用border-width,直接多增加一层就可以避免border-width和border-radius两者之间的矛盾

(3)兼容性

制作圆(设置4个属性)、半圆(设置两个属性)、扇形(设置一个属性)、椭圆(x/y)

7.box-shadow
可以当border使用,没有内外半径之分,并且不计算在结构中;
多层阴影用逗号【,】分开

兼容IE8以下版本,可以使用IE的滤镜进行模拟:

filter:progid:DXImageTransform.Microsoft.Shadow(color="颜色值",Direction=阴影半径(数值),Strength=阴影半径(数值))