CSS之box-shadow

使用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);}

CSS之box-shadow相关推荐

CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
css圆角box(网上流行用b标签)
css圆角box备忘 <style type="text/css"> div.box{} div.boxtitle{background-color:#888; hei ...
css圆角box(宽度自适应)(百度知道挖出)
css圆角box(百度知道挖出) 1.css .zhidao_box { position: relative; width: 100%; } .zhidao_box .rg_1, . ...
php中框是什么代码,css中box是什么文件
css中box是指CSS盒子模型,即Box Model:在CSS中,"box model"这一术语是用来设计和布局时使用:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包 ...
css的box模型_拆箱CSS Box模型的基础
css的box模型 by Bryan Smith 通过布莱恩史密斯拆箱CSS Box模型的基础 (Unboxing the basics of the CSS Box Model) Understa ...
Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...

CSS之box-shadow

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

CSS之box-shadow相关推荐

最新文章

热门文章

CSS之box-shadow

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

CSS之box-shadow相关推荐

最新文章

热门文章

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