这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战
opacity
opacity可以使元素透明或者半透明，属性值范围0-1之间，opcacity默认值是1，而且我们还可以利用opacity将伪元素进行显示或者隐藏。
opacity计算规则
当我们给父元素和子元素同时设置了半透明效果，因为opacity属性没有继承性，所以半透明效果会叠加在一起，比如我们给父元素和子元素都设置为opacity：0.4，则此时的透明度就是0.16，是两个opacity的乘积。
// 父元素的透明度
opacity-father {
opacity: 0.4
}
// 子元素的透明度
opacity-son {
opacity: 0.4
}
opacity的边界
因为opacity的范围是0-1，如果我们设置的值不在这个范围之内，那么系统会按边界值去显示。
.wrapper {
// 透明值设置为-11，但是系统会解析成0
opacity：-11;
// 透明值设置为88， 系统会解析成1
opacity：88
}
其中RGBA和HSLA都具有opacity这种边界值的特性。
border-radius
平时工作中，我们最常用到的就是像素和百分比去设置border-radius。
border-radius: 10px;
// 常用来设置圆形
border-radius: 50%;
border-radius是一种缩写形式，而它的全写是由四部分组成的：border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius四部分组成。
当只有1个值时，这个值的效果会作用四个角：border-radius: 5px
当有2个值时，第一个值作用于左上角和右下角，第二个值作用于右上角和左下角: border-radius：6px 10%
当有3个值时，第一个值作用于左上角，第二个值作用于右下角和左下角，第三个值作用于右下角: border-radius: 3px 5% 6px
当有4个值时，第一个值作用于左上角，第二个值作用于右上角，第三个值作用于右下角，第四个值作用于左下角: border-radius: 6px 7% 8px 4px
还有一些等价的缩写形式：
border-top-left-radius: 5px;
// 等价于
border-radius: 5px 5px;
border-radius常用的一些知识：
border-radius的圆角以外的区域无法响应点击事件。不支持负值。当我们给父元素设置了border-radius，子元素是直角效果，我们可以设置overflow：hidden使子元素在视觉上看起来是一个圆角。当我们将border-radius应用于display:table或者display: inline-table上时，我们必须让表格元素的border-collapse属性值为separate，border-collapse的默认值是separate，如果border-collapse: collapse，不会显示圆角效果。
我们还可以利用border-radius设置一些不规则的圆角效果:
.wrapper {
border-radius: 69% 29% 29% 69% / 59% 39% 59% 39%;
}
一般带圆弧的图形效果都可以使用border-radius来实现出来，我们可以绘制角标：
border-bottom-right-radius: 100%;
