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

[网页设计]CSS border系列


一、border

关于border的3个属性,分别为border-width、border-style、border-color。

其中,border-color默认为元素内容的前景色;border-width默认为关键字medium,但是border-style默认值为none;所以,不指定border-style,边框将不存在。

 

关于border-color

transparent,据说特定情况下有奇效,需要知道有这样一个可选值。

white,白色的dotted边框,有时候会有奇效。

比如:

更确切地说,应该是颜色与父元素的背景颜色一样的dotted/dashed边框。

 

8种border-style

(只有记住了,才能在需要的时候合理使用。)

 

关于mixed border

利用CSS的层叠,我们甚至可以为四个方向上的边框分别设置不同的宽度、样式和颜色,取决于具体情况。

 

二、border-radius

语法规则:

border-radius:a b c d; 顺序依次为上左、上右、下右、下左。(顺时针方向)

border-radius:a b c d/a b c d ;第一组为水平数值,第二组为垂直数值。

border-top-left-radius:a b; 单个圆角的设立。

(定义单个圆角时,一定要先上下、后左右,否则无效。)

 

注意:

圆角生效并不以边框的存在为前提,也就是说,即使没有边框,也能设立圆角。

 

小tips:border-radius:50%

 

三、border-image

与border-radius不同,border-image以border的存在为前提;其本质是将border-style替换成image。

语法规则:

border-image-source

支持none和url两种选择;(如果是none的话,下面就不用看了。。。)

border-image-slice

按top、right、bottom、left的顺序指定九宫格的切法;支持纯数字和百分数。

(纯数字自带px单位;百分数以图像的宽高为基准计算。)

fill,可选;默认情况下第九区是不显示的;指定了fill才会显示出来;在border-image-slice中指定。

border-image-width

按top、right、bottom、left的顺序指定边框图像的宽度,覆盖边框的宽度;可选。

经测试,border-image-width大于border-width时,会向内扩展(外面那条线不变,向里面扩展增加宽度),但是只是它的独角戏,除了它自己发生了变化之后,其它任何东西都不会变化;它会侵入padding区甚至内容区。

border-image-width小于border-width时,会向外收缩(外面那条线不变,里面这条线向外收缩),与padding区或者内容区留出空隙。

可以为0,即图像边框不存在;但不能为负值。

(个人建议,此属性看看就好,就让它默认等于边框的宽度吧。)

border-image-outset

按top、right、bottom、left的顺序指定图像向外移动的距离;可选;支持像素距离和纯数字。

像素距离好理解,20px就是移动20px的意思;纯数字是指border-width的倍数。(注意,是border-width,不关border-image-width的事。)

请注意,这里用的是移动这个词,并不是扩展。

border-image-repeat

按top、right、bottom、left的顺序指定如何填充边框的空白;默认stretch(拉伸),可选repeat(重复)和round(平铺)。

 

这里只是一些我对这些属性使用方法上的总结,并没有对属性本身的含义与机制作出说明。

关于这5个属性的具体说明,推荐一篇文章,css3:border-image边框图像详解,写得很好,非常仔细,我这么小白都看懂了。

 

四、box-shadow

语法规则:

h-shadow(必需,水平阴影的位置,可负);  

v-shadow(必需,垂直阴影的位置,可负);  

blur(可选,模糊距离);

spread(可选,阴影的尺寸);  

color(可选,阴影的颜色);  

outset(默认)/inset(可选,将外部阴影改为内部阴影)。

 

小tips:用box-shadow实现边框效果

CSS:

1 .container {2   width:200px;3   height:100px;4   background-color: #ccc;5   border:10px solid red;6   border-radius: 10px;7   box-shadow: 0 0 0 10px green; 8 }

效果: