CSS法力堂:Box-Shadow没那么轻巧啦:)

感谢

the-box-shadow
break-decoration
CSS3 box-shadow实现纸张的曲线投影效果
CSS完成跨浏览器包容性的盒阴影效果
CSS达成跨浏览器的box-shadow盒阴影效果(2)
PIE使IE扶植CSS3圆角盒阴影与渐变渲染
《图解CSS3宗旨能力与案例实战》 —— 3.5 CSS3盒子阴影属性

打赏支持小编写出更加的多好小说,谢谢!

打赏小编

css3 shadow达成的各样能够阴影效果,css3shadow

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3落到实处的各样阴影效果</title>
<style>
body{padding: 20px 0 0;font: 14px/1.5 Arial, sans-serif;text-align: center;color: #333;background: #FAF0D9;}
a{font-weight: bold;color: #346AA8;}
a: hover, a: focus, a: active{text-decoration: none;}
.container{position: relative;z-index: 1;width: 600px;padding: 20px;margin: 0 auto;background: #FAF0D9;}
.container: after{content: "";display: block;clear: both;visibility: hidden;height: 0;font-size: 0;}
/* Shared styles*/.drop-shadow{position: relative;float: left;width: 40%;padding: 1em;margin: 2em 10px 4em;background: #fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
.drop-shadow: before, .drop-shadow: after{content: "";position: absolute;z-index: -2;}
.drop-shadow p{font-size: 16px;font-weight: bold;}
/* Lifted corners*/.lifted{-moz-border-radius: 4px;border-radius: 4px;}
.lifted: before, .lifted: after{bottom: 15px;left: 10px;width: 50%;height: 20%;max-width: 300px;-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);-o-transform: rotate(-3deg);transform: rotate(-3deg);}
.lifted: after{right: 10px;left: auto;-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);-o-transform: rotate(3deg);transform: rotate(3deg);}
/* Curled corners*/.curled{border: 1px solid #efefef;-moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;border-radius: 0 0 120px 120px / 0 0 6px 6px;}
.curled: before, .curled: after{bottom: 12px;left: 10px;height: 55%;max-width: 200px;-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);-webkit-transform: skew(-8deg) rotate(-4deg);-moz-transform: skew(-8deg) rotate(-4deg);-o-transform: skew(-8deg) rotate(-4deg);transform: skew(-8deg) rotate(-4deg);}
.curled: after{right: 10px;left: auto;-webkit-transform: skew(8deg) rotate(4deg);-moz-transform: skew(8deg) rotate(4deg);-o-transform: skew(8deg) rotate(4deg);transform: skew(8deg) rotate(4deg);}
/* Perspective*/.perspective: before{left: 80px;bottom: 8px;width: 50%;height: 35%;max-width: 200px;-webkit-box-shadow: -80px 5px 10px rgba(0, 0, 0, 0.4);-moz-box-shadow: -80px 5px 8px rgba(0, 0, 0, 0.4);box-shadow: -80px 5px 8px rgba(0, 0, 0, 0.4);-webkit-transform: skew(50deg);-moz-transform: skew(50deg);-o-transform: skew(50deg);transform: skew(50deg);-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-o-transform-origin: 0 100%;transform-origin: 0 100%;}
.perspective: after{display: none;}
/* Raised shadow - no pseudo-elements needed*/.raised{-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
/* Curved shadows*/.curved: before{top: 10px;bottom: 10px;left: 0;right: 50%;-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.6);-moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);box-shadow: 0 0 15px rgba(0,0,0,0.6);-moz-border-radius: 10px / 100px;border-radius: 10px / 100px;}
.curved-vt-2: before{right: 0;}
.curved-hz-1: before{top: 50%;bottom: 0;left: 10px;right: 10px;-moz-border-radius: 100px / 10px;border-radius: 100px / 10px;}
.curved-hz-2: before{top: 0;bottom: 0;left: 10px;right: 10px;-moz-border-radius: 100px / 10px;border-radius: 100px / 10px;}
/* Rotated box*/.rotated{-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);-o-transform: rotate(-3deg);transform: rotate(-3deg);}
.rotated : first-child: before{content: "";position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;background: #fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
</style>
<script>
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-7489188-1']); _gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.async = true; ga.src = '';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div>;
<div class="container">
<h1><a href="">CSS drop-shadows without images</a></h1>
<div class="drop-shadow lifted">
<p>Lifted corners</p>
</div>
<div class="drop-shadow curled">
<p>Curled corners</p>
</div>
<div class="drop-shadow perspective">
<p>Perspective</p>
</div>
<div class="drop-shadow raised">
<p>Raised box</p>
</div>
<div class="drop-shadow curved curved-vt-1">
<p>Single vertical curve</p>
</div>
<div class="drop-shadow curved curved-vt-2">
<p>Vertical curves</p>
</div>
<div class="drop-shadow curved curved-hz-1">
<p>Single hozitonal curve</p>
</div>
<div class="drop-shadow curved curved-hz-2">
<p>Horizontal curves</p>
</div>
<div class="drop-shadow lifted rotated">
<p>Rotated box</p>
</div>
</div>
</body>
</html>

shadow完成的各样美丽阴影效果,css3shadow !DOCTYPE html head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title纯CSS3兑现的各个阴影效果...

CSS3 transform达成图片投影效果,

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>图片投影效果</title>
<style>
.box {
position: absolute;
padding: 2px;
background: white;
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
box-shadow: 1px 2px 4px rgba(0,0,0,.5);
}
.box img {
display:block;
width:200px;
height:220px;
border: 1px inset #8a4419;
background:#eee;
}
.box:after {
content: '';
-webkit-box-shadow: 100px 0 10px rgba(0,0,0,.2);
-moz-box-shadow: 100px 0 10px rgba(0,0,0,.2);
box-shadow: 100px 0 10px rgba(0,0,0,.2);
position: absolute;
width: 50%;
height: 80px;
bottom: 0;
right: 65px;
z-index: -1;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
transform: skew(-40deg);
}
</style>
</head>
<body>
<div>;
<div class="box"><img src='wall_s9.jpg'/></div>
</body>
</html>

transform完结图片投影效果, !DOCTYPE HTML html head meta charset="UTF-8" title图片投影效果/title style .box { position: absolute; padding: 2px; background: whit...

搞清各图层的z-index

图片 1
上海教室能够看来未有影亥时,各图层的z-index顺序。那么阴影呢?

  1. 对于outer-box-shadow,则其z-index高于margin图层,低于background-color图层;
  2. 对于inner-box-shadow,则其z-index高于padding图层,低于content图层。

指鹿为马边框 by blur radius

W3C spec中并未有规定浏览器商家采纳哪个种类方法实现模糊效果,反正效果与高斯模糊效果大致便是了。但有点大家要求小心的,这正是颠倒是非效果会扩充阴影的面积
图片 2

XHTML

<style type="text/css"> .outline{ border: 1px solid red; margin: 40px 0; } .s{ background: rgba(255, 100, 100, 0.1); width: 100px; height: 100px; } .s1{ box-shadow: 110px 0 0 #333; } .s2{ box-shadow: 110px 0 20px #333; } .s3{ box-shadow: 110px 0 40px #333; } </style> <div class="outline"> <div class="s s1">sample1</div> </div> <div class="outline"> <div class="s s2">sample2</div> </div> <div class="outline"> <div class="s s3">sample3</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style type="text/css">
.outline{
  border: 1px solid red;
  margin: 40px 0;
}
.s{
  background: rgba(255, 100, 100, 0.1);
  width: 100px;
  height: 100px;
}
.s1{
  box-shadow: 110px 0 0 #333;
}
.s2{
  box-shadow: 110px 0 20px #333;
}
.s3{
  box-shadow: 110px 0 40px #333;
}
</style>
<div class="outline">
  <div class="s s1">sample1</div>
</div>
<div class="outline">
  <div class="s s2">sample2</div>
</div>
<div class="outline">
  <div class="s s3">sample3</div>
</div>

sample1是blur radius为0的遵从,能够看看阴影尺寸与成分尺寸完全一样。而sample2是blur radius为20px的效果与利益,能够看出阴影尺寸有所扩张了,而sample3则扩张得越来越多一些。
明天大家感到上认识到blur radius值超越0时会扩展阴影尺寸,那么到底扩大多少啊?那大家要先明了模糊发生的胚胎地点了。

  1. 对此outer-shadow-box来讲,模糊产生的开第三个人置正是影子盒子的各边;
  2. 对此inner-shadow-box来讲,模糊爆发的最早地方正是各guideline。
    接下来模糊效果是从发生的职分,对于水平方向的边或guideline则向垂直方向分流,对于垂直方向的边或guideline则向水平方向分流,且分散的离开同样。
    分流的间距一样,因而各类方向各分流为blur radius/2的间距。看sample3中阴影尺寸已经与成分盒子重叠了,因为影子盒子左边框向左发散了20px了,超越它俩之间10px的品位间隔了,而sample2则刚刚附近而已。

缩放阴影尺寸 by spread distance

如果说blur radius是暗地里扩展阴影的尺码,那么spread distance则是胆大妄为地缩放阴影的尺寸了。
图片 3

XHTML

<style type="text/css"> .outline{ border: 1px solid red; margin: 40px 0; } .s{ background: rgba(255, 100, 100, 0.1); width: 100px; height: 100px; } .s1{ box-shadow: 110px 0 0 #333; } .s2{ box-shadow: 110px 0 0 10px #333; } .s3{ box-shadow: 110px 0 0 -10px #333; } </style> <div class="outline"> <div class="s s1">sample1</div> </div> <div class="outline"> <div class="s s2">sample2</div> </div> <div class="outline"> <div class="s s3">sample3</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style type="text/css">
.outline{
  border: 1px solid red;
  margin: 40px 0;
}
.s{
  background: rgba(255, 100, 100, 0.1);
  width: 100px;
  height: 100px;
}
.s1{
  box-shadow: 110px 0 0 #333;
}
.s2{
  box-shadow: 110px 0 0 10px #333;
}
.s3{
  box-shadow: 110px 0 0 -10px #333;
}
</style>
<div class="outline">
  <div class="s s1">sample1</div>
</div>
<div class="outline">
  <div class="s s2">sample2</div>
</div>
<div class="outline">
  <div class="s s3">sample3</div>
</div>

还记得《CSS魔法堂:重拾Border之——解构Border》中谈到通过border-top/right/bottom/left-colors贯彻彩虹边框吗?由于包容性难题和1px对应一种color的因由,实际选猎取比比较少,但透过outer-box-shadow和spread distance大家就足以获取效果更好,包容性极高的兑现方案了。
图片 4

XHTML

<style type="text/css"> .rainbow{ margin: 50px; width: 100px; height: 100px; box-shadow: 0 0 0 2px rgb(255,0,0), 0 0 0 5px rgb(255,165,0), 0 0 0 8px rgb(255,255,0), 0 0 0 10px rgb(0,255,0), 0 0 0 12px rgb(0,127,255), 0 0 0 15px rgb(0,0,255), 0 0 0 20px rgb(139,0,255); } </style> <div class="rainbow"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
.rainbow{
  margin: 50px;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 2px rgb(255,0,0),
              0 0 0 5px rgb(255,165,0),
              0 0 0 8px rgb(255,255,0),
              0 0 0 10px rgb(0,255,0),
              0 0 0 12px rgb(0,127,255),
              0 0 0 15px rgb(0,0,255),
              0 0 0 20px rgb(139,0,255);
}
</style>
<div class="rainbow"></div>

outer box-shadow 和 inner box-shadow怎么玩?

暗中认可境况下使用的是outer box-shadow,当在box-shadow中增加inset关键词后,则应用inner box-shadow了,但毕竟它俩的职能是什么的吗?
图片 5

XHTML

<style type="text/css"> .box{ float: left; background: #888; width: 100px; height: 100px; margin-right: 20px; } .outer-box-shadow{ box-shadow: 10px 10px #F00; } .inner-box-shadow{ box-shadow: 10px 10px #F00 inset; } </style> <div class="box outer-box-shadow"></div> <div class="box inner-box-shadow"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
.box{
  float: left;
 
  background: #888;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}
.outer-box-shadow{
  box-shadow: 10px 10px #F00;
}
.inner-box-shadow{
  box-shadow: 10px 10px #F00 inset;
}
</style>
<div class="box outer-box-shadow"></div>
<div class="box inner-box-shadow"></div>
</div>

outer-box-shadow
性格:阴影落在要素的border box之外。
金玉满堂原理:

  1. 创制一个与成分border box尺寸一致的影子盒子;
  2. 将影子盒子定位到于成分border box重合,并放在成分之下;
  3. 根据horizontal offsetvertical offset来相对原来的地方置作活动;
  4. 根据spread distance缩放阴影盒子的尺码(会影响盒子的移动);
  5. 根据blur radius对影子盒子作加工;
  6. 最后将影子盒子与元素border box重合部分区划掉。
    图片 6
XHTML

&lt;style type="text/css"&gt; .box{ background: #888; width: 100px;
height: 100px; } .outer-box-shadow{ box-shadow: 90px 10px #F00; }
&lt;/style&gt; &lt;div class="box outer-box-shadow"&gt;&lt;/div&gt;
&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6992dad7a647897445-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7a647897445-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7a647897445-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7a647897445-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7a647897445-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7a647897445-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7a647897445-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7a647897445-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7a647897445-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7a647897445-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7a647897445-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7a647897445-12">
12
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6992dad7a647897445-1" class="crayon-line">
&lt;style type=&quot;text/css&quot;&gt;
</div>
<div id="crayon-5b8f6992dad7a647897445-2" class="crayon-line crayon-striped-line">
.box{
</div>
<div id="crayon-5b8f6992dad7a647897445-3" class="crayon-line">
  background: #888;
</div>
<div id="crayon-5b8f6992dad7a647897445-4" class="crayon-line crayon-striped-line">
  width: 100px;
</div>
<div id="crayon-5b8f6992dad7a647897445-5" class="crayon-line">
  height: 100px;
</div>
<div id="crayon-5b8f6992dad7a647897445-6" class="crayon-line crayon-striped-line">
}
</div>
<div id="crayon-5b8f6992dad7a647897445-7" class="crayon-line">
.outer-box-shadow{
</div>
<div id="crayon-5b8f6992dad7a647897445-8" class="crayon-line crayon-striped-line">
  box-shadow: 90px 10px #F00;
</div>
<div id="crayon-5b8f6992dad7a647897445-9" class="crayon-line">
}
</div>
<div id="crayon-5b8f6992dad7a647897445-10" class="crayon-line crayon-striped-line">
&lt;/style&gt;
</div>
<div id="crayon-5b8f6992dad7a647897445-11" class="crayon-line">
&lt;div class=&quot;box outer-box-shadow&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f6992dad7a647897445-12" class="crayon-line crayon-striped-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


模拟一下:  
![](http://images2015.cnblogs.com/blog/347002/201605/347002-20160510113456437-1655623056.png)  



XHTML

&lt;style type="text/css"&gt; .box{ position: relative; }
.box-shadow{ position: absolute; z-index: -1; background: #F00;
width: 100px; height: 100px; left: 20px; top: 20px; } .box-content{
background: #888; width: 100px; height: 100px; } &lt;/style&gt;
&lt;div class="box"&gt; &lt;div class="box-shadow"&gt;&lt;/div&gt;
&lt;div class="box-content"&gt;&lt;/div&gt; &lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-19">
19
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-20">
20
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-21">
21
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad7d645852931-22">
22
</div>
<div class="crayon-num" data-line="crayon-5b8f6992dad7d645852931-23">
23
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6992dad7d645852931-1" class="crayon-line">
&lt;style type=&quot;text/css&quot;&gt;
</div>
<div id="crayon-5b8f6992dad7d645852931-2" class="crayon-line crayon-striped-line">
.box{
</div>
<div id="crayon-5b8f6992dad7d645852931-3" class="crayon-line">
  position: relative;
</div>
<div id="crayon-5b8f6992dad7d645852931-4" class="crayon-line crayon-striped-line">
}
</div>
<div id="crayon-5b8f6992dad7d645852931-5" class="crayon-line">
.box-shadow{
</div>
<div id="crayon-5b8f6992dad7d645852931-6" class="crayon-line crayon-striped-line">
  position: absolute;
</div>
<div id="crayon-5b8f6992dad7d645852931-7" class="crayon-line">
  z-index: -1;
</div>
<div id="crayon-5b8f6992dad7d645852931-8" class="crayon-line crayon-striped-line">
  background: #F00;
</div>
<div id="crayon-5b8f6992dad7d645852931-9" class="crayon-line">
  width: 100px;
</div>
<div id="crayon-5b8f6992dad7d645852931-10" class="crayon-line crayon-striped-line">
  height: 100px;
</div>
<div id="crayon-5b8f6992dad7d645852931-11" class="crayon-line">
  left: 20px;
</div>
<div id="crayon-5b8f6992dad7d645852931-12" class="crayon-line crayon-striped-line">
  top: 20px;
</div>
<div id="crayon-5b8f6992dad7d645852931-13" class="crayon-line">
}
</div>
<div id="crayon-5b8f6992dad7d645852931-14" class="crayon-line crayon-striped-line">
.box-content{
</div>
<div id="crayon-5b8f6992dad7d645852931-15" class="crayon-line">
  background: #888;
</div>
<div id="crayon-5b8f6992dad7d645852931-16" class="crayon-line crayon-striped-line">
  width: 100px;
</div>
<div id="crayon-5b8f6992dad7d645852931-17" class="crayon-line">
  height: 100px;
</div>
<div id="crayon-5b8f6992dad7d645852931-18" class="crayon-line crayon-striped-line">
}
</div>
<div id="crayon-5b8f6992dad7d645852931-19" class="crayon-line">
&lt;/style&gt;
</div>
<div id="crayon-5b8f6992dad7d645852931-20" class="crayon-line crayon-striped-line">
&lt;div class=&quot;box&quot;&gt;
</div>
<div id="crayon-5b8f6992dad7d645852931-21" class="crayon-line">
  &lt;div class=&quot;box-shadow&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f6992dad7d645852931-22" class="crayon-line crayon-striped-line">
  &lt;div class=&quot;box-content&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f6992dad7d645852931-23" class="crayon-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

inner-box-shadow
特色:阴影落在要素的padding box之内。
完毕原理(纯个人知道):

  1. 成立一个与成分padding box尺寸一致的阴影盒子;
  2. 将投影盒子定位到于成分padding box重合,并放在成分之上;
  3. 水平和垂直各画两条线,分别跟成分padding edge重合;(共4条分别记为left/top/right/bottom-guideline)
  4. 根据horizontal offsetvertical offset移动left/top/right/bottom-guideline。
  5. 根据spread distance移步4条线。spread distance为正数时,left-guideline向右移动,top-guideline向下活动,right-guideline向左移动和bottom-guidelien向上移动;spread distance为负数时,则相反。
  6. 根据blur radius加工成分各padding edge至其对应的guideline间的区域.
  7. 对影子盒子举行剪裁
    1. 划分掉不与成分padding box重叠的一部分;
    2. 仅展现成分各padding edge至其对应的guideline间的区域。
      图片 7
    XHTML

    &lt;style type="text/css"&gt; .box{ float: left; background:
    #888; width: 100px; height: 100px; margin-right: 10px; } .box1{
    box-shadow: 0 0 0 20px red inset; } .box2{ box-shadow: 10px 0 0
    20px red inset; } .box3{ box-shadow: 10px 0 10px 20px red inset;
    } .box4{ box-shadow: 0 0 10px 50px red inset; } &lt;/style&gt;
    &lt;div class="box box1"&gt;&lt;/div&gt; &lt;div class="box
    box2"&gt;&lt;/div&gt; &lt;div class="box box3"&gt;&lt;/div&gt;
    &lt;div class="box box4"&gt;&lt;/div&gt;

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-7">
    7
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-8">
    8
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-9">
    9
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-10">
    10
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-11">
    11
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-12">
    12
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-13">
    13
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-14">
    14
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-15">
    15
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-16">
    16
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-17">
    17
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-18">
    18
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-19">
    19
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-20">
    20
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-21">
    21
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-22">
    22
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-23">
    23
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad81873995032-24">
    24
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad81873995032-25">
    25
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6992dad81873995032-1" class="crayon-line">
    &lt;style type=&quot;text/css&quot;&gt;
    </div>
    <div id="crayon-5b8f6992dad81873995032-2" class="crayon-line crayon-striped-line">
    .box{
    </div>
    <div id="crayon-5b8f6992dad81873995032-3" class="crayon-line">
      float: left;
    </div>
    <div id="crayon-5b8f6992dad81873995032-4" class="crayon-line crayon-striped-line">
      background: #888;
    </div>
    <div id="crayon-5b8f6992dad81873995032-5" class="crayon-line">
      width: 100px;
    </div>
    <div id="crayon-5b8f6992dad81873995032-6" class="crayon-line crayon-striped-line">
      height: 100px;
    </div>
    <div id="crayon-5b8f6992dad81873995032-7" class="crayon-line">
      margin-right: 10px;
    </div>
    <div id="crayon-5b8f6992dad81873995032-8" class="crayon-line crayon-striped-line">
    }
    </div>
    <div id="crayon-5b8f6992dad81873995032-9" class="crayon-line">
    .box1{
    </div>
    <div id="crayon-5b8f6992dad81873995032-10" class="crayon-line crayon-striped-line">
      box-shadow: 0 0 0 20px red inset;
    </div>
    <div id="crayon-5b8f6992dad81873995032-11" class="crayon-line">
    }
    </div>
    <div id="crayon-5b8f6992dad81873995032-12" class="crayon-line crayon-striped-line">
    .box2{
    </div>
    <div id="crayon-5b8f6992dad81873995032-13" class="crayon-line">
      box-shadow: 10px 0 0 20px red inset;
    </div>
    <div id="crayon-5b8f6992dad81873995032-14" class="crayon-line crayon-striped-line">
    }
    </div>
    <div id="crayon-5b8f6992dad81873995032-15" class="crayon-line">
    .box3{
    </div>
    <div id="crayon-5b8f6992dad81873995032-16" class="crayon-line crayon-striped-line">
      box-shadow: 10px 0 10px 20px red inset;
    </div>
    <div id="crayon-5b8f6992dad81873995032-17" class="crayon-line">
    }
    </div>
    <div id="crayon-5b8f6992dad81873995032-18" class="crayon-line crayon-striped-line">
    .box4{
    </div>
    <div id="crayon-5b8f6992dad81873995032-19" class="crayon-line">
      box-shadow: 0 0 10px 50px red inset;
    </div>
    <div id="crayon-5b8f6992dad81873995032-20" class="crayon-line crayon-striped-line">
    }
    </div>
    <div id="crayon-5b8f6992dad81873995032-21" class="crayon-line">
    &lt;/style&gt;
    </div>
    <div id="crayon-5b8f6992dad81873995032-22" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;box box1&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f6992dad81873995032-23" class="crayon-line">
    &lt;div class=&quot;box box2&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f6992dad81873995032-24" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;box box3&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f6992dad81873995032-25" class="crayon-line">
    &lt;div class=&quot;box box4&quot;&gt;&lt;/div&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>


    模拟一下:  
    ![](http://images2015.cnblogs.com/blog/347002/201605/347002-20160510113522218-505856286.png)  



    XHTML

    &lt;style type="text/css"&gt; .box-shadow{ position: relative;
    display: inline-block; background: red; overflow: hidden; } .bg{
    position: absolute; background: #888; left: 30px; right: 10px;
    top: 20px; bottom: 20px; } .content{ position: relative;
    z-index: 1; width: 80px; height: 80px; padding: 20px; }
    &lt;/style&gt; &lt;div class="box-shadow"&gt; &lt;div
    class="bg"&gt;&lt;/div&gt; &lt;div
    class="content"&gt;&lt;/div&gt; &lt;/div&gt;

    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-7">
    7
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-8">
    8
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-9">
    9
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-10">
    10
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-11">
    11
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-12">
    12
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-13">
    13
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-14">
    14
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-15">
    15
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-16">
    16
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-17">
    17
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-18">
    18
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-19">
    19
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-20">
    20
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-21">
    21
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-22">
    22
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-23">
    23
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-24">
    24
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-25">
    25
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6992dad85377374128-26">
    26
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6992dad85377374128-27">
    27
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6992dad85377374128-1" class="crayon-line">
    &lt;style type=&quot;text/css&quot;&gt;
    </div>
    <div id="crayon-5b8f6992dad85377374128-2" class="crayon-line crayon-striped-line">
    .box-shadow{
    </div>
    <div id="crayon-5b8f6992dad85377374128-3" class="crayon-line">
      position: relative;
    </div>
    <div id="crayon-5b8f6992dad85377374128-4" class="crayon-line crayon-striped-line">
      display: inline-block;
    </div>
    <div id="crayon-5b8f6992dad85377374128-5" class="crayon-line">
      background: red;
    </div>
    <div id="crayon-5b8f6992dad85377374128-6" class="crayon-line crayon-striped-line">
      overflow: hidden;
    </div>
    <div id="crayon-5b8f6992dad85377374128-7" class="crayon-line">
    }
    </div>
    <div id="crayon-5b8f6992dad85377374128-8" class="crayon-line crayon-striped-line">
    .bg{
    </div>
    <div id="crayon-5b8f6992dad85377374128-9" class="crayon-line">
      position: absolute;
    </div>
    <div id="crayon-5b8f6992dad85377374128-10" class="crayon-line crayon-striped-line">
      background: #888;
    </div>
    <div id="crayon-5b8f6992dad85377374128-11" class="crayon-line">
      left: 30px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-12" class="crayon-line crayon-striped-line">
      right: 10px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-13" class="crayon-line">
      top: 20px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-14" class="crayon-line crayon-striped-line">
      bottom: 20px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-15" class="crayon-line">
    }
    </div>
    <div id="crayon-5b8f6992dad85377374128-16" class="crayon-line crayon-striped-line">
    .content{
    </div>
    <div id="crayon-5b8f6992dad85377374128-17" class="crayon-line">
      position: relative;
    </div>
    <div id="crayon-5b8f6992dad85377374128-18" class="crayon-line crayon-striped-line">
      z-index: 1;
    </div>
    <div id="crayon-5b8f6992dad85377374128-19" class="crayon-line">
      width: 80px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-20" class="crayon-line crayon-striped-line">
      height: 80px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-21" class="crayon-line">
      padding: 20px;
    </div>
    <div id="crayon-5b8f6992dad85377374128-22" class="crayon-line crayon-striped-line">
    }
    </div>
    <div id="crayon-5b8f6992dad85377374128-23" class="crayon-line">
    &lt;/style&gt;
    </div>
    <div id="crayon-5b8f6992dad85377374128-24" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;box-shadow&quot;&gt;
    </div>
    <div id="crayon-5b8f6992dad85377374128-25" class="crayon-line">
      &lt;div class=&quot;bg&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f6992dad85377374128-26" class="crayon-line crayon-striped-line">
      &lt;div class=&quot;content&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f6992dad85377374128-27" class="crayon-line">
    &lt;/div&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>

被隔绝的box-shadow

当设置box-shadow的盒子被拆分为多少个盒卯时,其相应的box-shadow又会怎样呢?其实这不单是box-shadow的标题,如border、background-image等均会凌驾同样的主题材料。CSS3中引进贰个新特点box-decoration-break来安装上述情况时的渲染效果。
box-decoration-break: slice | clone
slice是暗中认可值,表示首先按未拆分时的景况渲染border、background-image等体制,然后再将其向来拆分为五个盒子;
clone意味着首先将其一向拆分为四个盒子,然后再各个盒子渲染border、background-image等体制。
图片 8

XHTML

<style type="text/css"> .intro{ font-size: 14px; line-height: 1.5; text-indent: 1em; width: 300px; } .intro span{ border: 1px solid #666; border-radius: 5px; box-shadow: 5px 3px 3px #AAA; } .slice{ -webkit-box-decoration-break: slice; } .clone{ -webkit-box-decoration-break: clone; } </style> <p class="intro"> <span class="slice"> Hey there, welcome to be here to share something aboute CSS together:) My name is fsjohnhuang, a FE from Midea. Enjoy the evolution of FE, and feel excited in the work I'm doing now. </span> </p> <p class="intro"> <span class="clone"> Hey there, welcome to be here to share something aboute CSS together:) My name is fsjohnhuang, a FE from Midea. Enjoy the evolution of FE, and feel excited in the work I'm doing now. </span> </p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style type="text/css">
.intro{
  font-size: 14px;
  line-height: 1.5;
  text-indent: 1em;
  width: 300px;
}
.intro span{
  border: 1px solid #666;
  border-radius: 5px;
  box-shadow: 5px 3px 3px #AAA;
}
.slice{
  -webkit-box-decoration-break: slice;
}
.clone{
  -webkit-box-decoration-break: clone;
}
</style>
<p class="intro">
<span class="slice">
Hey there, welcome to be here to share something aboute CSS together:) My name is fsjohnhuang, a FE from Midea. Enjoy the evolution of FE, and feel excited in the work I'm doing now.
</span>
</p>
<p class="intro">
<span class="clone">
Hey there, welcome to be here to share something aboute CSS together:) My name is fsjohnhuang, a FE from Midea. Enjoy the evolution of FE, and feel excited in the work I'm doing now.
</span>
</p>

从下面能够见到,与其说box-decoration-break的属性值影响box-shadow的职能,还不如说是box-decoration-break的属性值影响border-radiusborder效益到成分盒子的效力,然后由盒子的效果再直接影响box-shadow的效果。

兼容性
图片 9
IE和Edge均不接济,FF援救得最棒,而Webkit内核的则要加-webkit-前缀。
对此不扶植的浏览器,其意义仿佛box-decoration-break:slice

前言

谈起box-shadow那第二个主见自然便是用来达成阴影,其实它还是能用于落到实处任何风趣的功效的,本篇就希图说说box-shadow的那一个事。

兼容性

图片 10
IE9都支持box-shadow多让人可喜可贺的消息啊(因为小编工作中只需宽容IE9 就Ok了:))。但IE6~8呢?方案比非常多呀,下面也是有简要的牵线到。@张鑫旭先生提到在模仿blur radius效果时,选用以下方案

CSS

.ieBlock{ height:100px; width:100px; background:#000; filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=10); -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=10)"; }

1
2
3
4
5
6
7
.ieBlock{
    height:100px;
    width:100px;
    background:#000;
    filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=10);
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=10)";
}

要比接纳以下方案要好!

CSS

.shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); }

1
2
3
4
5
6
7
8
9
.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

除此以外若想不假思考地用到生育条件中,依旧用成熟的CSS库较好。具体请参见
PIE使IE协助CSS3圆角盒阴影与渐变渲染

打赏扶植作者写出更加多好小说,谢谢!

任选一种支付办法

图片 11 图片 12

3 赞 5 收藏 2 评论

二话没说看效果

3D小球
图片 13

XHTML

<style type="text/css"> .ball{ background: rgba(100,100,100,0.2); width: 100px; height: 100px; padding: 10px; border-radius: 50%; box-shadow: -14px 8px 100px #333 inset, 0 0 2px #888, 3px -1px 4px #444; } </style> <div class="ball"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
.ball{
  background: rgba(100,100,100,0.2);
  width: 100px;
  height: 100px;
  padding: 10px;
  border-radius: 50%;
  box-shadow: -14px 8px 100px #333 inset,
              0 0 2px #888,
          3px -1px 4px #444;
}
</style>
<div class="ball"></div>

纸张阴影(来自@张鑫旭先生)
图片 14

XHTML

<style type="text/css"> .curved_box { display: inline-block; *display: inline; width: 200px; height: 248px; margin: 20px; background-color: #fff; border: 1px solid #eee; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; position: relative; *zoom: 1; } .curved_box:before { -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg); left: 15px; } .curved_box:after { -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); transform: skew(15deg) rotate(6deg); right: 15px; } .curved_box:before, .curved_box:after { width: 70%; height: 55%; content: ' '; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); position: absolute; bottom: 10px; z-index: -1; } </style> <div class="curved_box"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style type="text/css">
.curved_box {
    display: inline-block;
    *display: inline;
    width: 200px;
    height: 248px;
    margin: 20px;
    background-color: #fff;
    border: 1px solid #eee;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    position: relative;
    *zoom: 1;
}
 
.curved_box:before {
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg);
    left: 15px;
}
.curved_box:after {
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg);
    right: 15px;
}
 
.curved_box:before, .curved_box:after {
    width: 70%;
    height: 55%;
    content: ' ';
    
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    
    position: absolute;
    bottom: 10px;
    z-index: -1;    
}
</style>
<div class="curved_box"></div>

细读属性

总的来看地点这么靓丽的效果,是或不是忧虑想澄清box-shadow呢?上面大家来一步步解密它呢!

圆角or直角box-shadow傻傻分不清楚?

黑影不只有暗许尺寸与成分盒子一致,暗许形状也同等。也便是因素盒子选择圆角时,阴影的暗中认可形状也是圆角的。既然说是暗许形状一致,正是说能够不同咯!那终究如何不一样等呢,上边大家一并来看个毕竟吧!
图片 15

XHTML

<style type="text/css"> .s1{ background: #0EF; width: 100px; height: 100px; border-radius: 10px; box-shadow: 110px 0 0 -10px #333, 220px 0 0 0 #666, 360px 0 0 20px #888; } </style> <div class="s1">sample1</div>

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
.s1{
  background: #0EF;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  box-shadow: 110px 0 0 -10px #333,
        220px 0 0 0 #666,
        360px 0 0 20px #888;
}
</style>
<div class="s1">sample1</div>

当设置spread distance后,border-radius的值也将随后转移,具体公式为border-radius spread-distance * (1 (border-radius / spread-distance - 1)^3)
因此spread distance为正数时,border-radius会变大; 而spread distance为负数时,border-radius会减小,直至为0px截止。

CSS法力堂:Box-Shadow没那么粗略啦:)

2016/05/19 · CSS · 2 评论 · box-shadow, CSS

正文小编: 伯乐在线 - ^-^肥仔John 。未经作者许可,禁绝转发!
迎接参与伯乐在线 专栏撰稿人。

至于小编:^-^肥仔John

图片 16

偏前端的临栈程序员 个人主页 · 作者的篇章 · 5 ·    

图片 17

阴影的position

通过horizontal/vertical offset重定位阴影盒子,通过blur radiusspread distance缩放阴影盒子的尺寸,但请在乎的是阴影盒子不影响别的盒子的布局,其实阴影盒子就约等于接纳absolute定位同样,不会攻克Normal flow的半空中,也不会影响别的因素的布局,由此仅修改阴影地方或尺寸时,只会触发repaint,而不会触发reflow。

概述属性语法

box-shadow: none | <shadow>[,<shadow>]*
默许值为none
<shadow>:inset? && <length>{2,4} && <color>?
shadow pattern,默感到outset,即接纳outer box-shadow。通过安装为inset时,则应用inner box-shadow。
horizontal offset,阴影间距原职责的程度位移,正数表示向右移动,负数表示向左移动。
vertical offset,阴影间隔原来的地点置的垂直位移,正数表示向下活动,负数表示发展移动。
blur radius,私下认可值为0,阴影模糊度半径。
spread distance,暗许值为0,扩充或裁减阴影的成效面积。
<color>,阴影颜色,暗中同意与color属性一致。

小心:大家得以同期安装多个黑影,而阴影的z-index值从左向右递减。

本文由上海时时乐走势图发布于web前端,转载请注明出处:CSS法力堂:Box-Shadow没那么轻巧啦:)

css

您可能还会对下面的文章感兴趣: