1 <style> 2 .box{ 3 200px; 4 height: 200px; 5 background-color: red; 6 margin: 100px auto; 7 box-shadow: 0px 0px 25px 5px orange,0px 0px 25px 10px green; 8 position: relative; 9 }19 </style> 20 </head> 21 <body> 22 <!-- 盒子阴影 box-shadow: 23 参数1是这个盒子阴影的水平位置 24 参数2是这个盒子阴影的垂直位置 25 参数3是阴影的模糊度 26 参数4是这个阴影的宽度 27 参数5阴影的颜色 28 参数6是决定阴影是外扩还是内聚默认是外扩的阴影 29 30 盒子阴影可以写多个 这个阴影之间使用逗号隔开而且先写的优先级更高 可以直接覆盖后面的dom元素都可以加盒子阴影 31 32 box- sizing这个属性会用来设置盒子的边框以及边距是外扩还是内聚 33 默认情况下盒子是外扩 外扩会使盒子整体呈现出来的效果变大可能会影响的我们的布局内聚的属性值border-box 默认值content-box--> 34 <div class="box"></div> 37 </body>
文字阴影
1 <style> 2 p{ 3 display: block; 4 50px; 5 height: 50px; 6 border: 1px solid #FF4500; 7 margin: auto; 8 text-align: center; 9 line-height: 50px; 10 } 11 p:hover{ 12 text-shadow: 5px 5px 2px blueviolet; 13 } 14 </style> 15 </head> 16 <body> 17 <!-- text- shadow 18 参数1文字阴影的水平位置 19 参数2文字阴影的垂直位置 20 参数3模糊度 21 参数4阴影的颜色 22 文字阴影也可以写多个多 个文字阴影之间使用都和哦隔开先写的优先级更高 --> 23 <p>p标签</p> 24 </body>
