俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

俄罗斯贵宾会css3 shadow实现的各种漂亮阴影效果,css3shadow

关于作者:^-^肥仔John

俄罗斯贵宾会 1

偏前端的临栈工程师 个人主页 · 我的文章 · 5 ·    

俄罗斯贵宾会 2

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 = 'http://www.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div>http://www.999jiujiu.com/&lt;/div&gt;
<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>

http://www.bkjia.com/Javascript/1012934.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1012934.htmlTechArticlecss3 shadow实现的各种漂亮阴影效果,css3shadow !DOCTYPE html head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title纯CSS3实现的各种阴影效果...

CSS魔法堂:Box-Shadow没那么简单啦:)

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

本文作者: 伯乐在线 - ^-^肥仔John 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者

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

默认情况下采用的是outer box-shadow,当在box-shadow中添加inset关键词后,则采用inner box-shadow了,但到底它俩的效果是如何的呢?
俄罗斯贵宾会 3

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重合部分剪切掉。
    俄罗斯贵宾会 4
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间的区域。
      俄罗斯贵宾会 5
    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>

兼容性

俄罗斯贵宾会 6
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圆角盒阴影与渐变渲染

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

俄罗斯贵宾会 7 俄罗斯贵宾会 8

3 赞 5 收藏 2 评论

阴影的position

通过horizontal/vertical offset重定位阴影盒子,通过blur radiusspread distance缩放阴影盒子的尺寸,但请注意的是阴影盒子不影响其他盒子的布局,其实阴影盒子就相当于采用absolute定位一样,不会占据Normal flow的空间,也不会影响其他元素的布局,因此仅修改阴影位置或尺寸时,只会触发repaint,而不会触发reflow。

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

阴影不仅默认尺寸与元素盒子一致,默认形状也一致。也就是元素盒子采用圆角时,阴影的默认形状也是圆角的。既然说是默认形状一致,就是说可以不一致咯!那到底如何不一致呢,下面我们一起来看个究竟吧!
俄罗斯贵宾会 9

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为止。

细读属性

看到上面这么绚丽的效果,是不是迫不及待想弄清box-shadow呢?下面我们来一步步解密它吧!

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:俄罗斯贵宾会css3 shadow实现的各种漂亮阴影效果,css3shadow

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