「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」。

outline 轮廓

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

它的用法和border边框类似，参数也是宽度、样式、颜色，但是它 和border的不同之处是轮廓不占据空间，我们举个例子看一下

<div class="box1"></div>
<div class="box2"></div>

两个div， class="box1"的div设置 border 边框宽度30px, class="box2"的div设置 outline 轮廓宽度30px, 清除浏览器默认margin后方便我们更明显的看一下效果

       *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;  height: 100px;
            background-color :salmon;
        }
        .box1{
            border: violet 30px solid;
        }
        .box2{
            margin-top: 120px;
            outline: violet 30px solid;
        }

border-radius 圆角

border-radius 圆角 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

圆角在平常的使用中可以说很多，参数最多可以有四个，4个（ 左上角，右上角，右下角，左下角），2个（（左上角、右下角），（右上角、左下角）），1个就是四个角都一样喽

画一个圆通常就是 border-radius: 50% ; 表示椭圆的横半径和竖半径都是50%， 当我们需要一个椭圆的时候，只需要在它的基础上把div的高度和宽度变成不一样的即可。

.box1{
    width: 200px; height: 200px;
    background-color: thistle;
    border-radius: 50% ;  
}

我们也可以设置 border-radius: 10% 20% 30% 40% / 50% 60% 70% 80%;
其中10% 20% 表示上边椭圆横半径之和，30% 40% 表示下边椭圆横半径之和 ， 50% 80% 表示左边椭圆竖半径之和， 60% 70% 表示右边椭圆竖半径之和

这是我看到其他博主推荐的一个border-radius网站，挺好用的 9elements.github.io/fancy-borde….

box-shadow 阴影

box-shadow 向 div 元素添加阴影，通常也是4个参数（水平移动、垂直移动、模糊大小、颜色)

box-shadow: 10px 10px 20px #888888 ; 

我们也可以设置多个阴影

<div class="circle"></div>

        .circle{
            margin-top: 100px;
            width: 200px;
            height: 200px;
            box-shadow: 
            300px 0px 0px -80px green ,
            450px 0px 0px -80px green,
            600px 0px 0px -80px green,
            750px 0px 0px -80px green,
            900px 0px 0px -80px green ;
            border-radius: 100%;            
        }