CSS3--圆角

来源：互联网发布：我知女人心电影插曲编辑：程序博客网时间：2024/04/29 19:08

使用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象。

1. CSS3圆角

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

border-radius: 1-4 length|% / 1-4 length|%;

注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

值描述length定义弯道的形状。%使用%定义角落的形状。

div{border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:300px;border-radius:25px;}

2. CSS3盒阴影

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

box-shadow: h-shadow v-shadow blur spread color inset;

值说明h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影的大小color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表inset可选。从外层的阴影（开始时）改变阴影内侧阴影

div{width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 5px #888888;}

3. CSS3边界图片

CSS3中的border-image属性可以使用图像创建一个边框：

border-image: source slice width outset repeat;

值描述border-image-source用于指定要用于绘制边框的图像的位置border-image-slice图像边界向内偏移border-image-width图像边界的宽度border-image-outset用于指定在边框外部绘制 border-image-area 的量border-image-repeat这个例子演示了如何创建一个border-image 属性的按钮。

div{border:15px solid transparent;width:250px;padding:10px 20px;}#round{-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */-o-border-image:url(border.png) 30 30 round; /* Opera */border-image:url(border.png) 30 30 round;}#stretch{-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */-o-border-image:url(border.png) 30 30 stretch; /* Opera */border-image:url(border.png) 30 30 stretch;}

注意：IE不支持border-image属性。

0 0