博主谈谈使用css3盒子阴影box-shadow中的感受

DurkBlue 2019-11-29 1946

默认

摘要： 原来这个属性的值和参数跟text-shadow是一个样的，就是都是水平偏移（可取正负值）、垂直偏移（同上）、阴影模糊值、阴影颜色。当然使用text-shadow时是不需要区分浏览器...

原来这个属性的值和参数跟text-shadow是一个样的，就是都是水平偏移（可取正负值）、垂直偏移（同上）、阴影模糊值、阴影颜色。

当然使用text-shadow时是不需要区分浏览器的。另外我还发现网络有一个是可以在前面添加inset(内发光或者阴影）。类似于这样子写·

box-shadow:inset 2px 2px 2px #FF0000;

颜色值还可以是这样子的rgba(0,0,0,5)

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

取值：

<length> <length> <length>? <length>? || <color>：
阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色

说明：

设置块阴影

引擎类型	Gecko	Webkit	Presto
box-shadow	-moz-box-shadow	-webkit-box-shadow

兼容性：

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(×)Firefox 3.0.10	(√)Chrome 2.0.x	(×)Opera 9.64	(√)Safari 4
	(×)IE7	(√)Firefox 3.5		(√)Opera 10.6
	(×)IE8
	(√)IE9

代码与实例

CSS代码：

.box_shadow{
    width:180px; 
    padding:40px 20px; 
    background:white; 
    -webkit-box-shadow:4px 2px 6px #333333; 
    -moz-box-shadow:3px 2px 6px #333333;
}

HTML代码：

//code from http://caibaojian.com/box-shadow.html
<div class="box_shadow">盒阴影效果，看看如何~~</div>

效果截图

拓展知识点（由各前端同仁提供）

知识点(1) 提供者：张鑫旭 [编辑本段]

css3盒阴影效果不支持图片中空透明背景边缘的阴影效果见如下测试代码：img{-moz-box-shadow:2px 2px 4px #333333; -webkit-box-shadow:2px 2px 4px #333333; box-shadow:2px 2px 4px #333333; background:-moz-linear-gradient(top, white, #beceeb); background:-webkit-gradient(linear,0 0, 0 bottom, from(white), to(#beceeb));}<img src="../image/zxx_cavity.png" />结果中空的“张鑫旭”三个字的边缘却没有阴影，只有图片的边缘有。您可以狠狠地点击这里查看demo：http://www.zhangxinxu.com/study/201004/png-cavity-box-shadow-test.html

知识点(2) 提供者：张鑫旭 [编辑本段]

CSS3盒阴影效果不仅支持盒外阴影，还支持内阴影，使用时增加一个inset属性即可。例如：box-shadow: inset 0 0 1px #fff;所表示的含义是没有偏移，1像素模糊的白色内阴影。box- shadow还支持多阴影，例如：box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255,255,255,0.33), inset -2px -2px 10px rgba(255,255,255,0.25);所表示的含义是，无偏移1像素模糊白色阴影重叠于左上角4像素偏移20像素模糊透明度0.33的白色内阴影再重叠于右下角偏移2像素，模糊10像素，透明度0.25的白色内阴影。box-shadow的投影功能很强大，配合其他一些CSS3属性，能够轻松实现很多精湛的UI效果，例如下面的样式： -webkit-border-radius: 40px; -webkit-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000; -moz-border-radius: 40px; -moz-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df; height: 34px; width: 80px; border-radius: 40px; background: #034a76; box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df;能够实现下图所示的按钮效果：

发现在使用:after之后还有这样子的效果，来自网络

看下面一个例子：为下面这张图片添加阴影，让其有立体感：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
body {
width:500px;
margin:50px auto;
}
.box {
position:relative;
-webkit-box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
padding:10px;
background:#fff;
}
.box img {
width:100%;
border:1px solid #8a4419;
border-style:inset;
}
.box:after {
content:'';
position:absolute;
z-index:-1;/* 阴影部分 */
-webkit-box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);

width:70%;
left:15%;
height:100px;
bottom:0;
}
</style>
</head>
<body>
<div class="box">
<img src="allstar.jpg" title="球星云集" />
</div>
</body>
</html>

运行效果如下（Chrome中）：