边框与圆角
CSS3圆角
border-radius属性
一个最多可指定四个border-*-radius属性的复合属性,这个属性允许你为元素添加圆角边框。
div {
width: 800px;
height: 300px;
border: 5px solid red;
margin: 0 auto;
/*border-radius: 5px;*/
border-radius: 50%;
}
CSS3指定每个圆角
多值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
顺时针。
三个值:第一个为左上角,第二个值为右上角和左下角,第三个值为右下角。
div {
width: 800px;
height: 300px;
border: 5px solid red;
margin: 0 auto;
border-radius: 30px 50px 70px 100px;
}
div {
position: relative;
width: 500px;
height: 300px;
border: 1px solid black;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
font-size: 24px;
font-weight: bold;
text-align: center;
line-height: 300px;
}
div::before,
div::after{
position: absolute;
content: '';
display: block;
border: 1px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
div::before {
width: 50px;
height: 50px;
bottom: -25px;
right: 25px;
}
div::after {
width: 20px;
height: 20px;
bottom: -75px;
right: 0;
}
CSS3盒阴影
box-shadow属性
box-shadow属性可以设置一个或多个下拉阴影的框
语法:box-shadow: inset hoff voff blur color;
CSS3边界图片
border-image属性
使用border-image-*属性来构建美丽的可扩展按钮
语法: border-image: source slice width outset repeat;
source: 指定要使用的图像。