當前位置：
首頁 >
CSS之box-shadow
發(fā)布時間：2025/3/16
40
豆豆
生活随笔
收集整理的這篇文章主要介紹了
CSS之box-shadow
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
使用Box-shadow屬性表現(xiàn)陰影效果是現(xiàn)代瀏覽器中是一個非常有用的技巧，通過它我們可以做出很多非常酷的東西。讓我們來一步一步的了解box-shadow屬性的基本用法，然后進一步了解?::before?和?::after?偽元素的用法。
box-shadow：<length><length><length><length>||?<color>
<length><length><length>?<length>??||?<color>：陰影水平偏移值；陰影垂直偏移值；陰影邊框；陰影模糊值；陰影顏色?
第1個長度值用來設(shè)置對象的陰影水平偏移值。可以為負值
第2個長度值用來設(shè)置對象的陰影垂直偏移值。可以為負值
如果提供了第3個長度值則用來設(shè)置對象的陰影模糊值。不允許負值
如果提供了第4個長度值則用來設(shè)置對象的陰影外延值。不允許負值
設(shè)置對象的陰影的顏色
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>box-shadow_CSS</title> <meta name="author" content="" /> <meta name="copyright" content="" /> <style>.test li{margin-top:20px;list-style:none;} .test .outset{width:400px;padding:10px;background:#eee;-webkit-box-shadow:5px 5px #ddd;box-shadow:5px 5px #ddd; } .test .outset-blur{width:400px;padding:10px;background:#eee;-webkit-box-shadow:5px 5px 5px rgba(0,0,0,.6);box-shadow:5px 5px 5px rgba(0,0,0,.6);box-shadow:5px 5px 5px 10px #ddd;-webkit-shadow:; } .test .outset-extension{width:400px;padding:10px;background:#eee;-webkit-box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);box-shadow:5px 5px 5px 10px rgba(0,0,0,.6); } .test .inset{width:400px;padding:10px;background:#eee;-webkit-box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset; } .test .multiple-shadow{width:400px;padding:10px;background:#eee;-webkit-box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6); } </style> </head> <body> <ul class="test"><li class="outset">外陰影常規(guī)效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li><li class="outset-blur">外陰影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li><li class="outset-extension">外陰影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li><li class="inset">內(nèi)陰影效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li><li class="multiple-shadow">外陰影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li> </ul> </body> </html>
偽元素?::before?和?::after?的樂趣
使用偽元素?::before?和?::after?，我們能創(chuàng)造出非常逼真的只有圖片才能實現(xiàn)的陰影效果。讓我來看一個例子：
.box11 {width: 300px;height: 100px;background: #ccc;border-radius: 10px;margin: 10px; }.shadow {position: relative;max-width: 270px;box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 20px rgba(0,0,0,0.1) inset; }.shadow::before, .shadow::after {content:"";position:absolute;z-index:-1; }.shadow::before, .shadow::after {content:"";position:absolute;z-index:-1;bottom:15px;left:10px;width:50%;height:20%; }.shadow::before, .shadow::after {content:"";position:absolute;z-index:-1;bottom:15px;left:10px;width:50%;height:20%;box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);transform:rotate(-3deg); }.shadow::after{right:10px;left:auto;transform:rotate(3deg);}總結(jié)
以上是生活随笔為你收集整理的CSS之box-shadow的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 代码重构技巧宝典，学透本篇就足够了！
- 下一篇： CSS z-index 属性