CSS3边框与圆角

边框与圆角

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: 指定要使用的图像。