web前端之CSS3（1）：边框、圆角、背景

CSS3 边框

边框属性：

• border-radius：创建圆角
• box-shadow：添加阴影
• border-image：允许指定一个图片作为边框

CSS3 圆角

border-radius属性，可以给任何元素制作 "圆角"。只指定一个值，那么将生成 4 个 圆角。

如果要在四个角上一 一指定，规则如下：

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 一个值： 四个圆角值相同

圆角属性：

属性	描述
border-radius	所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

 

CSS3背景

背景属性：

• background-image：添加背景图片，不同图片用逗号隔开
• background-size：指定背景图像的大小，指定的大小是相对于父元素的宽度和高度的百分比的大小
• background-origin：指定了背景图像的位置区域，content-box(背景图像的内容框的相对位置), padding-box(背景图像填充框的相对位置),和 border-box(背景图像边界框的相对位置)
• background-clip：规定背景的绘制区域，content-box(背景图像的内容框的相对位置), padding-box(背景图像填充框的相对位置),和 border-box(背景图像边界框的相对位置)