H5C3--边框阴影box-shadow

Posted QinXiao.Shou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5C3--边框阴影box-shadow相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         body {
12             margin: 0;
13             padding: 0;
14             background-color: #F7F7F7;
15         }
16 
17         img {
18             width: 100%;
19             display: block;
20         }
21 
22         .items {
23             padding: 30px;
24             overflow: hidden;
25         }
26 
27         .item {
28             width: 200px;
29             height: 200px;
30             padding-bottom: 100px;
31             margin-right: 30px;
32             border: 1px solid #CCC;
33             background-color: #FFF;
34             float: left;
35         }
36         /*添加阴影:
37         spread:设置阴影的扩散
38         inset:设置阴影为内阴影
39         box-shadow:offsetX offsetY blur spread color inset*/
40 
41         /*需求:获取前四个item元素*/
42         .item:nth-of-type(-n + 4){
43             box-shadow: 3px 3px 3px 0px #ccc;
44         }
45         .item:nth-last-of-type(1){
46             box-shadow: 3px 3px 3px 0px #ccc inset,-3px -3px 3px 0px #ccc inset;
47         }
48     </style>
49 </head>
50 <body>
51 <div class="items">
52     <div class="item">
53         <img src="../images/pk1.png">
54     </div>
55     <div class="item">
56         <img src="../images/pk2.png">
57     </div>
58     <div class="item">
59         <img src="../images/pk3.png">
60     </div>
61     <div class="item">
62         <img src="../images/pk1.png">
63     </div>
64     <div class="item"></div>
65 </div>
66 
67 </body>
68 </html>

 

以上是关于H5C3--边框阴影box-shadow的主要内容,如果未能解决你的问题,请参考以下文章

边框-边框阴影-box-shadow

边框阴影box-shadow

box-shadow四个边框设置阴影样式

边框阴影 模糊值 x轴偏移值 y轴偏移值 模糊半径 阴影半径 || 颜色 insect,其中阴影半径可以为负值,意思是增加或减少指定数值的阴影半径

H5C3--文本阴影

CSS3 新增的特性