HTML怎么添加阴影效果

本文小编为大家详细介绍“HTML怎么添加阴影效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML怎么添加阴影效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

    你也可以在::before和::after两个伪元素中添加阴影效果

    实例

#boxshadow {

    position: relative;

    b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

    pa dding: 10px;

    bac kground: white;

} 

#boxshadow img {

     width: 100%;

     border: 1px solid #8a4419;

     border-style: inset;

} 

#boxshadow::after {

     content: '';

    position: absolute;

    z-index: -1; /* hide shadow behind image */

    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 

    width: 70%; 

    left: 15%; /* one half of the remaining 30% */

    height: 100px;

    bottom: 0;

}

    阴影的一个使用特例是卡片效果

    实例

div.card {

    width: 250px;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    text-align: center;

}

读到这里，这篇“HTML怎么添加阴影效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。