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=阴影半径（数值）)

巴特西

CSS3边框温故

最新文章

热门文章