Css3样式 border属性和background属性

边框

        border

圆角边框

       在 CSS3 中 border-radius 属性被用于创建圆角：

.div{
border 2px red solid;
border-radius:20px;
}

• border-radius: 15px 50px 30px 5px;：左上角为15px，右上角为50px，右下角为30px，左下角为5px。

• border-radius: 15px 50px 30px;：左上角为15px，右上角和左下角为50px，右下角为30px。

• border-radius: 15px 50px;：左上角和右下角为15px，右上角和左下角为50px。

• border-radius: 15px;：四个角都是15px。

盒子阴影

CSS3 中的box-shadow 属性被用来添加阴影：

div{
    border: 1px solid red;
	box-shadow: 10px 10px 5px #888888;
}

边界图片

         border-image 属性

div{
    border: 15px solid transparent;
    border-image: url('img/border.png') 30 30 round;

}        

拉伸以填充该区域

div{
    border: 15px solid transparent;
    border-image: url('img/border.png') 30 30 stretch;
}

 

background-image 属性

    实例代码：

.div14 {
				width: 200px;
				height: 200px;
				background: url(img/background-origin.gif);
			}

 效果图：

background-origin 属性指的背景图像的位置区域

content-box、padding-box 和 border-box 区域内可以放置背景图像。

 

background-clip背景剪裁属性是从指定位置开始绘制