2020-09-23 CSS盒子模型（下）

1.圆角边框的常用写法

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角
语法为：

border-radius: 50%;  /*百分比*/
border-radius: 100px;  /*数值*/

后面的数值可以是1个2个3个或4个
2个是对角
3个是顺时针从左上角开始，右上角和左下角都是中间的值
4个是顺时针从左上角开始，分别是四个角的值

也可以单独写一个角角：
border-top-left-radius: （左上角） border-bottom-right-radius:（右下角）

2.盒子阴影

常用语法：

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3 );

注意：

1. 默认的是外阴影（outset），但是不能画蛇添足写这个单词，否则是无效的
2. 盒子阴影不占用空间，不会影响其他盒子的排列

可以做一个鼠标划过就有阴影的功能

        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3 );
        }

3.文字阴影

常用语法：

    text-shadow: h-shadow v-shadow blur color;

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