本文目录索引

• 1，CSS3阴影效果
• 2，如何利用CSS3阴影效果制作出立体感效果
• 3，CSS 如何实现让div的四个边框都有阴影的效果？
• 4，html 给文字添加阴影
• 5，怎样用 CSS 制作文字阴影效果
• 6，css阴影效果，如图所示的阴影效果怎么实现
• 7，用CSS3怎么实现盒阴影 box-shadow？

1，CSS3阴影效果

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。
基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
box-shadow属性的参数设置取值：
阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。
为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。

2，如何利用CSS3阴影效果制作出立体感效果

box-shadow:5px 2px 6px #000;
数值从左至右：阴影水平偏移值（正值向右，负值向左）；阴影垂直偏移值（正值向下，负值向上）；阴影模糊值；阴影颜色。transform: rotate(-3deg)
数值表示旋转的角度，正值为顺时针，负值为逆时针。
因为CSS3还是草案，所以现有浏览器的最新版都是以私有属性来支持transform，需要加上-webkit-、-moz-、-o-、-ms-

3，CSS 如何实现让div的四个边框都有阴影的效果？

css怎么给4个边框添加阴影 span{ box-shadow: 2px 4px 6px #000; } 百度知道“css怎么给4个边框添加阴影” 简单的解释一下相关的代码属性 box-shadow: 2px 4px 6px #000 首先2px : 表示水平阴影的位置，然后4px : 表示垂直阴影的位置，接着5px : 表示模糊距离，最后#000 ： 表示阴影的颜色（#000 黑色） 拓展资料： 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 参考资料：百度百科-CSS

4，html 给文字添加阴影

1、设置h3的style以此来添加text-shadow,这个就是文字的阴影了哦。它的参数分别表示阴影的水平距离，垂直距离以及模糊程度和阴影的颜色了。 2、前两个数值越大距离原来文字的距离就会越远哦。而第三个值越大那么阴影就会越模糊哦。 3、div元素添加阴影效果也是差不多的情况，不过用到的是box-shadow属性而已，参数也是一样的。 4、比方我就设置了div元素的红色阴影效果。 5、如果想要让div元素的阴影效果更加的逼真，那么可以适当的缩写数值哦。

5，怎样用 CSS 制作文字阴影效果

文本阴影 text-shadow：none|shadow[,shadow]*shadow = length{2,3}&&color?默认值：none语法分析： none：无阴影 第1个长度值：阴影水平偏移值。可为负值 第2个长度值：阴影垂直偏移值。可为负值 第3个长度值：可选，阴影模糊值。不允许负值 color：设置对象的阴影的颜色。可以使用16进制颜色值，也可以使用英文单词，还可以采用rgba的表示法。 参考资料：CSS3文本阴影 text-shadow 文本阴影案例 源代码 .h5course { width: 500px; padding: 30px; background: #333; text-shadow: 0 1px 1px #fff; color: #000; font-size: 40px; font-weight: bold; font-family: "微软雅黑";}

6，css阴影效果，如图所示的阴影效果怎么实现

纯CSS3实现的各种阴影效果

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


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





CSS drop-shadows without images

Lifted corners




Curled corners




Perspective




Raised box




Single vertical curve




Vertical curves




Single hozitonal curve




Horizontal curves




Rotated box





自己可以模仿成自己的效果

7，用CSS3怎么实现盒阴影 box-shadow？

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

因此可以这样写：
div
{
box-shadow: 10px 10px 5px #888888;
}