Web前端入门：CSS元素外观属性（边框、阴影、轮廓、透明度）

可模拟出第二条边框 / box-shadow: 0 0 0 10px #000 inset; / 使用 x 轴偏移位置 / box-shadow: 10px 0 10px #000; / 使用 y 轴偏移位置 */ box-shadow: 0 10px 10px #000;

效果如下：
![](https://cdn.res.knowhub.vip/c/2504/14/3e6615c2.png?G1QAAMTsdJzIJxKq26hD2jvFHc2ARBVBpZ71es9Z%2byb6fheIxme0Pn1%2f%2bEPr08lqRi0kEIMieFZcxsgsHBKLWS3IcQ0H)
## 透明度 opacity
`opacity` 就是让元素变得透明，可以看到背后景色，嘿...就是像透视眼一样，取值范围 0.0 ~ 1.0，0 表示完全透明啥都能看到，1 表示完全不透明啥都看不到。
```csharp
opacity: 0.8; /* 透明度 50% */

效果如下：

总结

边框、阴影、轮廓、透明度这些属性在 Web 网页中随处可见，属于前端必备手术刀，随时都可能用上。 参考资料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border