css3边框效果

1. css3 边框圆角效果 ：

border-radius:20px; /*所有角都是用半径为20px的圆角*/

border-radius:5px 6px 4px 7px; /*四个半径值分别是左上角、右上角、左下角、右下角 ；顺时针方向*/

/*实心上半圆*/
.div_1{
     height:50px;
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;
}

/*实心圆*/
.div_2{
     height:100px;
    width:100px;
    background:#9da;
    border-radius:50px;
}

2. css3边框阴影 box-shadow:

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

X轴偏移量：必需。水平阴影的位置，允许负值。

y轴偏移量：必需。垂直阴影的位置，允许负值。

投影方式：设置inset时为内部阴影方式，省略为外阴影方式。inset可以写在参数的第一个或最后一个，其它位置无效。

添加多个阴影：只需用逗号隔开

.box_shadow{
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

阴影模糊半径与阴影扩展半径的区别：

  阴影模糊半径：此参数可选，值只能为正值，如果值为0，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊。

  阴影扩展半径：此参数可选。值可以是正负值。值为正，则整个阴影都延展扩大。
3. 为边框应用图片：border-image

border-image:url(xx.jpg) 10px 20px no-repeat;

参数：图片路径 后面是像素，按照顺时针方向，也可以简写20 ，然后是图片的延伸方式，

round : 平铺

repeat : 重复

stretch : 拉伸