box-shadow
box-shadow:
认识各项值的:[投影方式] X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色阴影模糊半径:默认0,没有负值。值越大,模糊面积越大,阴影就越大越淡阴影扩展半径:默认0,正值,阴影扩大;负值,阴影收缩。阴影是不占据空间的,所以元素如果靠边,会有一部分看不见。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/> <title>Title</title> <style> * { margin: 0; height: 0; line-height: 1.5; box-sizing: border-box; } body {width: 96%;height: 100vh;margin: 0 auto;display: flex; justify-content: space-between} p {height: 30px} small { display: block; height: auto; min-height: 18px; } .wrapper { width: 33%; flex-grow: 0; } /*阴影扩展半径*/ .skittles { position: relative; width: 20px; height: 20px; margin: 100px auto; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px rgb(243, 176, 189), 0 0 0 20px rgb(152, 242, 174), 0 0 0 30px rgb(247, 247, 167), 0 0 0 40px rgb(174, 192, 238), 0 0 0 50px rgb(252, 243, 219), 0 0 0 60px rgb(138, 217, 245), 0 0 0 70px rgb(209, 173, 240); } .skittles:after { position: absolute; right: -100%; z-index: -1; content: ''; width: 10px; height: 140px; background: #8b7575; transform: rotate(-36deg); border-radius: 10px; } /*阴影模糊半径同阴影扩展半径实现*/ .blurBox-1, .blurBox-2, .blurBox-3 { display: inline-block; overflow: hidden; width: 100px; height: 60px; margin: 20px; color: #fff; text-align: center; line-height: 60px; background: rgb(237, 232, 154); } .blurBox-1 {box-shadow: 0 0 0 10px rgb(135, 226, 191)} .blurBox-2 {box-shadow: 0 0 10px 10px rgb(135, 226, 191)} .blurBox-3 {box-shadow: 0 10px 10px 10px rgb(135, 226, 191)} /*特别的效果*/ .blurSpread-1, .blurSpread-2, .blurSpread-3 { position: relative; display: inline-block; width: 120px; height: 80px; margin: 20px 0 0 20px; color: #fff; text-align: center; line-height: 80px; background: rgb(165, 163, 239); } /*只要设置了阴影扩展半径,就会应用在四边(阴影模糊半径同是),如果要设置具体一边阴影,那边阴影偏移量的绝对值要比阴影扩展半径绝对值大(阴影扩展半径要为负数,才能把其它边的缩回去)*/ .blurSpread-1 { /*box-shadow: 0 10px 0 10px #486685;*/ /*box-shadow: 0 12px 8px -10px #486685;*/ } .blurSpread-1:after { position: absolute; content: ''; z-index: -1; right: 6px; bottom: 5px; width: 86%; height: 15px; box-shadow: 0 10px 10px 0px #000000b0; transform: rotate(-5deg); } /*添加前后伪元素,使得阴影颜色加深,会比单个效果好些。*/ .blurSpread-2:after, .blurSpread-2:before { position: absolute; content: ""; top: 70px; left: 35px; right: 35px; z-index: -1; box-shadow: 0 0 30px 8px #000; border-radius: 100px/20px; } .blurSpread-3 { box-shadow: 0px 1px 4px rgba(0,0,0,.2), 0px 0px 20px rgba(0,0,0,0.3) inset; } .blurSpread-3:before, .blurSpread-3:after { position: absolute; content: ''; z-index: -1; bottom: 15px; left: 5px; width: 45%; height: 20%; box-shadow: 0 15px 10px rgba(0,0,0,.8); transform: rotate(-5deg); } .blurSpread-3:after { left: auto; right: 5px; transform: rotate(5deg); } </style> </head> <body> <div class="wrapper"> <p>阴影扩展半径实现彩虹糖:</p> <div class="skittles"></div> </div> <div class="wrapper"> <p>阴影模糊半径实现:</p> <small>  对第3个解释:设置y值,往下移10px,故原本阴影扩展半径在-y方向就没有了,看起来还有一点,是因为阴影模糊半径有值</small> <small>1、box-shadow: 0 0 0 10px rgb(234, 182, 191)--第3个值</small> <small>2、box-shadow: 0 0 10px 10px rgb(234, 182, 191)--第4个值</small> <small>3、box-shadow: 0 10px 10px 10px rgb(234, 182, 191)--第2个值</small> <div class="blurBox-1">1</div> <div class="blurBox-2">2</div> <div class="blurBox-3">3</div> </div> <div class="wrapper"> <p>特别的阴影设置:</p> <small>  当盒子没有宽高时,只设置阴影模糊半径没有效果,而加上阴影扩展半径则可以显示阴影</small> <small>  为一个元素(width:100px)添加伪元素时,其伪元素若没有设置宽度值(已设置了绝对定位), 在没有设置left,或right值情况下,会有默认值,两者并不等,但加总为父元素的宽(100px);如果设置了 left和right值加总小于父元素宽,则伪元素默认宽度即父元素宽度减去left、right值(即100px-left-right), 若left+right值大于父元素宽度,则伪元素的宽度为0 </small> <div class="blurSpread-1">1</div> <div class="blurSpread-2">2</div> <div class="blurSpread-3">3</div> </div> </body> </html>