ruorbb自用|前端学习10——CSS圆角边框，盒子、文字阴影

CSS3新增的三个。

一、圆角边框

border-radius: length;            数字越大，坡度约缓

length可以是数字 也可以是百分比

        .yuanxing {
            height: 200px;
            width: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50%就是宽度和高度的一半，等价于100px */
            border-radius: 50%;
        }

        .juxing {
            height: 100px;
            width: 300px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }

border-radius: 10px 20px 15px 30px ;还可以跟四个值，分别是左上角、右上角、右下角、左下角  分开写的话，border-top-left-radius: 10px;，其他角的类似

二、盒子阴影

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3); */

        }

        /* 原先盒子没有影子，当鼠标经过盒子之后就添加阴影效果 */
        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
        }

 三、文字阴影（了解）

div {
            font-size: 50px;
            color: orange;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }

和盒子阴影格式一样