前端 - CSS3边框和圆角盒子阴影设置 - 《前端基础知识综合》

CSS3圆角
CSS3指定每一个圆角
CSS3盒阴影
CSS3边界图片

CSS3圆角

1、border-radius:一个最多可以指定四个border-*-radius属性的复合属性，为元素添加圆角边框
2、语法：border-radius:1-4 length|%/1-4 length|%
3、兼容：IE9+ firefox4+ chrome safari5+ opera

CSS3指定每一个圆角

1、多个值：四个值：第一个 - 左上角第二个 - 右上角第三个 - 右下角第四个 - 左下角

2、三个值：第一个 - 左上角第二个 - 右上角和左下角第三个 - 右下角

3、两个值：第一个值 - 左上和右下第二个值 - 右上和左下

4、一个值：四个圆角相同

圆角案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            position:relative;/*相对定位生成相对定位的元素，通过top，bottom，left，right的甚至相对于正常（原先本身）位置进行定位，课通过z-index进行层次分级*/
            width: 500px;/*宽度*/
            height: 350px;/*高度*/
            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: 350px;
        }
        div:before,
        div:after{
            position: absolute;/*绝对定位生成绝对定位的元素，相对于static定位意外的第一个父元素进行定位。元素的位置 通过lift，top，right以及bottom属性及逆行规定。可通过z-index进行此次分级*/
            content:"";
            display:block;
            border: 1px solid black;
            -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: 0px;
        }
    </style>
</head>
<body>
    <div>大家好，欢迎来到渡课网！</div>
</body>
</html>