第三章 边框

第三章 边框

圆角效果 border-radius
值：<length>n <percentage>
说明：
1.一般使用px单位，也可使用百分数和em，不过兼容性较差。
2.与border相同，可单边设置，如border-left-radius，也可缩写border-radius，同时设置4个边，也可以使用4个值，分别设置4个边。
3.缩写时，4个值的顺序分别是左上角 右上角 右下角 左下角
4.半圆的实现方法：设置height为width值的一般，将2个角的border-radius值设置成>=height值。
5.实心圆的实现方法：设置height=width，将4个角的border-radius值都设置成height值的一半。

阴影 box-shadow
值：X轴偏移量 Y轴偏移量 ［阴影模糊半径］ ［阴影扩展半径］［阴影颜色］ ［投影方式］
X轴偏移量：必需，outset时正值向右，负值向左。inset时相反。
Y轴偏移量：必需，outset时正值向下，负值向上。inset时相反。
阴影半径：可选，值为0时（默认）没有任何阴影效果。
阴影扩展半径：可选，值越大，模糊越厉害。
阴影颜色：可选，省略时默认为黑色。
投影方式：可选 (inset为向内，outset为向外，默认为outset)。
顺序：投影方式写在最前或最后，其它位置无效。
例，一个阴影 p {box-shadow: 2px 2px 4px #foo inset;}
    多个阴影 p {box-shadow: 2px 2px 4px 5px #foo inset, 2px 2px 2px;}

为边框应用图像 border-image
p {border-image: url(border.jpg) 70 70 70 70 repeat}
实质：将图片切割成4部分，分别应用于4个边。
路径：绝对路径
切割宽度：4个值分别是切割4个图片的宽度，可缩写。
图片延伸方式：
repeat：一直重复，超出部分裁剪掉
round：图片铺满，可能被压缩或拉伸
stretch：有多长 拉多长
说明：chrome下round和repeat的效果区别不大。