1.1圆角边框

image.png

• 参数值可以是百分比也可以是数值
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半，或者直接写为50%
• 如果是个矩形可以设置为高度的一半
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开写：border-top-left-radius、border-top-right-radius、border-bootom-left-radius、border-bottom-right-radius

  .yuanxing{
            width:200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50%就是宽度和高度的一半，等价于100px */
            border-radius: 50%;
        }
        .juxing{
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置成高度的一半 */
            border-radius: 50px;
        }
        .radius{
            width: 200px;
            height: 200px;
            border-radius: 10px 20px 30px 40px;
        }

 1、圆形的做法：
    <div class="yuanxing"></div>
    2、圆角矩形的做法：
    <div class="juxing"></div>
    3、可以设置不同的圆角：
    <div class="radius"></div>

1.2盒子阴影（重点）

box-shadow:h-shadow v-shadow blur spread color inset;

1.3文字阴影

text-shadow:h-shadow v-shadow blur color;
大致与盒子阴影相同