盒子阴影透明度的设置为什么不能用opacity设置？

最新推荐文章于 2023-05-20 20:12:52 发布

_半截的诗

最新推荐文章于 2023-05-20 20:12:52 发布

阅读量322

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/Z0116_/article/details/129647810

版权

本文探讨了为什么不能使用opacity属性设置盒子阴影的透明度，因为该属性会影响到父元素及其所有子元素。作者通过实例展示了当在父元素上设置opacity时，子元素会继承透明效果。为了解决这个问题，文章推荐使用box-shadow属性结合rgba颜色值来实现仅阴影部分透明的效果，从而确保不影响其他元素。这对于前端开发者尤其是新手来说是一篇有价值的参考资料。

摘要由CSDN通过智能技术生成

一：opacity属性

opacity属性是CSS3的属性，用于设置元素的不透明级别。默认值是1，取值范围从0（透明）到1（不透明）。

二：为什么说盒子阴影透明程度的设置不能用opacity设置呢？

首先要了解，不能用opacity这个属性设置并不是说没效果用不了，而是当你使用这个元素去设置一个盒子阴影的透明度的时候，效果不仅会呈现在父元素上，子元素也会被继承下来。所以不推荐使用opac来设置透明度。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="w xczx-boutique">
        <div class="boutique">
            <ul>
                <li class="first1"><