阴影大全

最新推荐文章于 2022-07-26 21:42:48 发布

转载最新推荐文章于 2022-07-26 21:42:48 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangshengli520/p/10951054.html

该博客主要展示了HTML中不同类型的阴影效果。通过CSS的box - shadow属性，实现了如左边、底部、右上、左下等不同位置的阴影，还包括无左、无下等特殊阴影效果，为前端页面设计提供了多样的阴影样式选择。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        .shadow div{
            float:left;
            margin:50px 120px;
            width:100px;
            height:100px;
            border:2px solid orange;
            text-align:center;
            line-height:100px;
         }
        .left{
            box-shadow:-5px 0 10px -5px #00ff00;
        }
        .bottom{
            box-shadow:0 5px 10px -5px #00ff00;
        }
        .right{
            box-shadow:5px 0 10px -5px #00ff00;
        }
        .top{
            box-shadow:0px -5px 10px -5px #00ff00;
        }
        .left-top{
            box-shadow:-5px -5px 10px  -4px #00ff00;            
        }        
        .right-top{
            box-shadow:5px -5px 10px -4px #00ff00;
        }
        .left-bottom{
            box-shadow:-5px 5px 10px -4px #00ff00;
        }
        .right-bottom{
            box-shadow:5px 5px 10px -4px #00ff00;
        }
        .no-left{
            /* .right-bottom,.right-top组合 */
            box-shadow:5px 5px 10px -4px #00ff00,5px -5px 10px -4px  #00ff00;
        }
        .no-bottom{
            /* .left-top,.right-top组合 */
            box-shadow:-5px -5px 10px  -4px #00ff00,5px -5px 10px -4px  #00ff00;
        }
        .no-right{
            /* .left-top，.left-bottom组合 */
            box-shadow:-5px -5px 10px  -4px #00ff00,-5px 5px 10px -4px #00ff00;
        }
        .no-top{
            /* .left-bottom,,right-bottom组合 */
            box-shadow:-5px 5px 10px -4px #00ff00,5px 5px 10px -4px #00ff00;
        }
    </style>
    <body>
    <div class="shadow">
        <div class="left">左边阴影</div>
        <div class="bottom">底部阴影</div>
        <div class="right">右部阴影</div>
        <div class="top">顶部部阴影</div>
        <div class="left-top">左上阴影</div>
        <div class="right-top">右上阴影</div>
        <div class="left-bottom">左下阴影</div>
        <div class="right-bottom">右下阴影</div>
        <div class="no-left">无左阴影</div>
        <div class="no-bottom">无下阴影</div>
        <div class="no-right">无右阴影</div>
        <div class="no-top">无上阴影</div>        
    </div>
    </body>
</html>

转载于:https://www.cnblogs.com/wangshengli520/p/10951054.html