box-shadow
2013-03-05 14:23
155 查看
语法:
box-shadow:<length> <length> <length> <length> || <color>
取值:
<length> <length> <length>? <length>? || <color>:阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色说明:
设置块阴影box-shadow这个属性应用的非常普遍,可以使你的元素立刻变得漂亮起来,只是记得不要把值设得太离谱。
box-shadow的四个参数:
x-offset x轴偏移
y-offset y轴偏移
blur 模糊值
color of shadow 阴影颜色
下面来看一个例子,代码如下:
<!DOCTYPE html>
<html>
<head>
<title>盒子阴影</title>
<meta charset="utf-8"/>
<style>
.box {
width:300px;
height:300px;
background-color:#fff;
/* 设置阴影 */
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
}
</style>
</head>
<body>
<div class="box">
<br /><br /><br /><br />
看,是不是很有立体感?没有设置边框啊。
</div>
</body>
</html>
运行效果如下(Chrome中):
还可以一次运用多个box-shadows,这样做会产生一些有趣的效果,看下面这个例子:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
.box {
width:300px;
height:300px;
background-color:#fff;
/* 设置阴影 */
-webkit-box-shadow:1px 1px 3px green, -1px -1px 3px blue;
-moz-box-shadow:1px 1px 3px green, -1px -1px 3px blue;
box-shadow:1px 1px 3px green, -1px -1px 3px blue;
}
</style>
</head>
<body>
<div class="box">
<br /><br /><br /><br />
看,我有两个颜色的阴影!O(∩_∩)O哈!
</div>
</body>
</html>
运行效果如下(Chrome中):
可以看到,有两个颜色的阴影。
看下面一个例子:为下面这张图片添加阴影,让其有立体感:
<!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中):
以前我吗需要在photoshop中把图片做成这样的效果,现在可以直接用CSS代码来实现了。
转: /article/5494502.html
相关文章推荐
- 利用box-shadow 实现单边(多边)投影
- CSS3——box-sizing\background-size\box-shadow
- 阴影 box-shadow
- box-shadow(text-shadow)参数详解
- ☀【CSS3】阴影 box-shadow
- CSS3属性box-shadow和text-shadow使用
- css3 box-shadow发光效果
- CSS3阴影 box-shadow的使用和技巧总结
- CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解
- 阴影box-shadow,圆角border-radius,渐变背景background兼容性
- CSS3 box-shadow 属性
- box-shadow阴影
- 你不知道的box-shadow
- CSS3阴影 box-shadow的使用和技巧总结--2017
- box-shadow写3d搜索栏
- css3中的outline,box-shadow和user-select总结
- 【css】box-shadow匹配ps投影效果/text-shadow
- box-shadow
- CSS3 box-shadow(阴影使用)