CSS之box-shadow

来源：互联网发布：python 2.7基础教程编辑：程序博客网时间：2024/05/18 01:01

使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解 ::before 和 ::after 伪元素的用法。

box-shadow：<length><length><length><length>|| <color>

<length><length><length>?<length>? || <color>：阴影水平偏移值；阴影垂直偏移值；阴影边框；阴影模糊值；阴影颜色

第1个长度值用来设置对象的阴影水平偏移值。可以为负值

第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值

设置对象的阴影的颜色

<!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">外阴影常规效果<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">内阴影效果<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 ，我们能创造出非常逼真的只有图片才能实现的阴影效果。让我来看一个例子：

.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); }

0 0

CSS之box-shadow

伪元素 ::before 和 ::after 的乐趣

伪元素 `::before` 和 `::after` 的乐趣