Html分层的box-shadow效果的示例代码

最新推荐文章于 2023-11-26 18:15:02 发布

云南仟龙Mark

最新推荐文章于 2023-11-26 18:15:02 发布

阅读量305

点赞数

文章标签： css html html5

原文链接：https://blog.51cto.com/u_15111999/3613785

版权

这篇文章关键介绍了Html分层的box-shadow实际效果,文中根据实例编码给大伙儿介绍的十分详尽，对大伙儿的学习培训或工作中具备一定的参考借鉴使用价值，要用的盆友能够参考下

watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=

先上图：今天我们做这个效果！

watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=

其实也没什么，就是分享一下大家在做网页的时候经常会遇到要做导航栏之类的，可能会觉得自己的导航栏总是少了点立体的感觉，今天我们就来看看！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            body{
                margin: 0;
            }
            .clearfix {
              overflow: auto;
            }
            .shadow_box{
                box-shadow: 0px 3px 10px 1px #888888;
            }
            div.sticky{
                 
                position: sticky;
                top: 0;
                 
                background:azure;
                text-align: center;
                     （http://www.qlyl1688.com/product_ycxsyw.html） 
                 
            }
            .img1{
                float: left;
                clear: both;
                margin-left:100px;
                opacity: 0.8;
                overflow: auto;
                 
            }
             
            ul{
                list-style-type: 0;
                margin: 0;
                padding: 0;
                width: 7%;
                height: 100%;
                background-color:rgb(147, 171, 235) ;
                position:fixed;
                overflow: auto;
                border-radius: 25px;
                 
                 
            }
            li a{
                display: block;
                color:#000;
                padding: 8px 16px;
                text-decoration: none;
                font-family:"黑体";
                 
            }
            li:hover{
                background-color: #555;
                color: white;
                 
            }
             
        </style>
        <title>XR官网</title>
    </head>
     
     
    <body>
         
        <div class="sticky clearfix shadow_box">
            <img class="img1" src="img/4.png" width="60px" height="60px "  />
             
        </div>
        <div>
            <ul>
                <li><a href="index.html">核心科技</a></li>
                <li><a href="index.html">党政板块</a></li>
                <li><a href="index.html">经营情况</a></li>
                <li><a href="index.html">未来发展</a></li>
                <li><a href="index.html">联系我们</a></li>
            </ul>
        </div>
        <div style="padding-bottom: 2000px;"></div>
         
    </body>
</html>

直接上完整代码，这也是大家最喜欢的方式，不磨磨唧唧了，我们主要看这个

watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=

这就是阴影效果的“罪魁祸首”，因为我定义了box-shadow，然后指定了相关的参数，就可以设置成这样啦，有朋友问，你这个参数啥意思，我怎么知道？没关系，我来用一张图告诉你！

watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=

这就是box-shadow的所有参数。相信你可以设置好的，如果你还是不太会，可以给我留言，我帮你一起设置！感谢支持！

到此这篇有关Html分层的box-shadow实际效果的文章就详细介绍到这了,大量有关HTML分层box-shadow內容请搜索脚本之家之前的文章或再次访问下边的有关文章，期待大伙儿之后多多的适用脚本之家！

云南仟龙Mark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html分层的box-shadow效果的示例代码

这篇文章关键介绍了Html分层的box-shadow实际效果,文中根据实例编码给大伙儿介绍的十分详尽，对大伙儿的学习培训或工作中具备一定的参考借鉴使用价值，要用的盆友能够参考下watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=先上图：今天我们做这个效果！watermark,size_14,text_QDUxQ1RP5Y2a5a6i,co
复制链接

扫一扫