浅谈关键词unset虽然说上述代码是可以实现我们需要的效果，但是如果我们换成下面的代码的话，会显得更加的简洁一点。

在做项目的时候偶然看到了关键字unset，自己之前用的比较少，所以今天决定记录一下加深对unset的印象。

首先来看一下关键字 inherit、initial 和 unset：

关键词	说明
inherit	指定一个属性应从父元素继承它的值
initial	用于设置 CSS 属性为它的默认值
unset	擦除属性申明；一个属性定义了unset值，如果该属性是默认继承属性，该值等同于inherit，如果该属性是非继承属性，该值等同于initial

然后我们重点通过举例子来看下unset的用法：

假设我们需要实现如上图效果，通常我们是这样写的，

<div class="box"></div>

.box{
    width: 200px;
    height: 200px;
    background: lawngreen;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 0 5px #888888;
    margin: 100px auto;
}
.box::before{
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    position: absolute;
    left: -10px;
    bottom: 40px;
}
.box::after{
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    position: absolute;
    right: -10px;
    bottom: 40px;
}

虽然说上述代码是可以实现我们需要的效果，但是如果我们换成下面的代码的话，会显得更加的简洁一点。

.box{
    width: 200px;
    height: 200px;
    background: lawngreen;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 0 5px #888888;
    margin: 100px auto;
}
.box::before,
.box::after{
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    position: absolute;
    left: -10px;
    bottom: 40px;
}
.box::after{
    left: unset;
    right: -10px;
}