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