CSS3边框

border属性是css盒子模型基础属性之一。 css3中添加的border属性 border-color border-image border-radius border-shadow 一、 border-radius 兼容性：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。 语法： 1 border-radius: none | <length>{1,4} [/ <length>{1,4}] ? 　解析： 　　四个值的顺序为：top-left、top-right、bottom-right、bottom-left（即顺时针顺序） 　　如果反斜杠'/'存在，若'/'存在，则前面的值设置为元素圆角的水平半径，后面的值为垂直方向的半径 如果不存在，则圆角的水平方向的半径和垂直方向的半径相等。 length设置的主要有如下四个场景： 　　border-radius：length{1}　　top-left、top-right、bottom-right、bottom-left四个值相等。 　　border-radius: length{2}　　top-left、bottom-right取第一个值，top-right、bottom-left取第二个值。 　　border-radius: length{3}　　top-left第一个值，top-right、bottom-left 第二个值 ，bottom-right第三个值 　　border-radius: length{4}　　top-left第一个值，top-right 第二个值 ，bottom-right第三个值，bottom-left第四个值 　　none： 默认值，表示没有圆角 　　派生出来的子属性： 　　border-top-left-radius: <length> [<length>]? 　　border-top-right-radius: <length> [<length>]? 　　border-bottom-right-radius: <length> [<length>]? 　　border-bottom-left-radius: <length> [<length>]? 　　实例： 　　不规则圆角边框 .radius{ background:#ddd; width:300px; height:300px; border-radius:100px 80px 60px 40px / 50px 40px 30px 20px; } 二、box-shadow 可以使用一个或者多个投影，如果多个投影，中间用逗号隔开 语法：box-shadow: none | [inset x-offset y-offset blur-radius spread-radius],[inset x-offset y-offset blur-radius spread-radius] 　参数解析： 　　none：默认值，无任何阴影效果。 　　inset：阴影类型，可选值，不设置默认为外阴影，唯一值为inset，设置内阴影 　　x-offset：阴影水平偏移量，其值可以是负数，也可以是整数，如果为去正值，阴影在元素的右边，反之，在元素的左边。 　　y-offset：阴影垂直偏移量，其值也可以是负数，如果取整数，阴影在元素的底部，反之在元素的上部。 　　blur-radius：阴影模糊半径，可选参数，只能为正值，值越大边缘就更模糊。 　　spread-radius：阴影扩展半径，可选参数，可以为正负值，如果为正值，整个阴影都延展扩大，反之，整个阴缩小。 　　浏览器兼容：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性 　　实例： 　　单边阴影 width:200px; height:100px; border:1px solid #ccc; box-shadow: 0px 4px 5px -3px red; margin:20px; box-shadow不会算到盒子模型中，会占据边框之外的位置 注，border、阴影、背景的层级关系如下：边框在内阴影之上，内阴影在背景图片之上，背景图片在背景色之上，背景色在外阴影之上 层级关系 div{ width:100px; height:100px; border:12px solid blue; background-color:orange; border-top-left-radius:60px 90px; border-bottom-right-radius:60px 90px; box-shadow:64px 64px 24px 40px rgba(0,0,0,0.4),12px 12px 0 18px rgba(0,0,0,0.4) inset; }