当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS3基础教程:box-shadow属性

时间:2013-03-02 03:42来源:未知 作者:admin 点击:

标签:CSS3基础教程:box-shadow属性 教程(56)基础(18)下面(16)属性(68)CSS3(90)box-shadow(4)来看(4)
下面来看一个例子,代码如下: y-offset y轴偏移 看下面一个例子:为下面这张图片增加阴影,让其有破体感: blur 含混值 设置块阴影 !DOCTYPE html html head title盒子阴影/title meta charset=utf-8 / style .box { width:300px; height:300px; background
CSS3基础教程:box-shadow属性》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023321H013.htm

下面来看一个例子,代码如下:

y-offset                         y轴偏移

看下面一个例子:为下面这张图片增加阴影,让其有破体感:

blur                            含混值

设置块阴影

<!DOCTYPE html>
<html>
<head>
<title>盒子阴影</title>
<meta charset="utf-8" />
<style>
.box {
width:300px;
height:300px;
background-color:#fff,css3圆角IE的兼容方法;

/* 设置阴影 */
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
}
</style>,CSS3和jQuery动态时钟制作过程;
</head>
<body>
<div class="box">
<br /><br /><br /><br />
看,是不是很有立体感?不设置边框啊。
</div>
</body>
</html>

运行效果如下(Chrome中):

可以看到,有两个颜色的阴影。

<!DOCTYPE html>
<html>
<head>
<,css3制作网页实例 点击切换不同的CSS列表;title></title>
<meta charset="utf-8" />,CSS3入门教程:target伪类简介;
<style>
.box {
width:300px;
height:300px;
background-color:#fff;

/* 设置阴影 */
-webkit-box-shadow:1px 1px 3px green, -1px -1px 3px blue,CSS3入门教程(9):RGBA声明;
-moz-box-shadow:1px 1px 3px green, -1px -1px 3px blue;
box-shadow:1px 1px 3px green,CSS3入门教程(8):关于透明度, -1px -1px 3px blue;
}
</style>
</head>
<body>
<div class="box">
<br /><br /><br /><br />
看,我有两个颜色的阴影!O(∩_∩)O哈!
</div>,CSS3入门教程(7):嵌入字体;
</body>
</html>

运行后果如下(Chrome中):

Tag:   基础   属性   教程     基本   属性   教程   取值: <length> <length>,CSS3入门教程(6):多列 多卷; <length>? <length>? || <color>: 阴影程度偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影隐约值;阴影颜色  阐明:

x-offset                         x轴偏移

--> [网站建设之]CSS3基础教程:box-shadow属性

建站学CSS3基础教程,本文咱们来学习一下box-shadow属性。 语法:

以前我吗须要在photoshop中把图片做成这样的效果,当初可以直接用CSS代码来实现了。

还能够一次应用多个box-shadows,这样做会发生一些有趣的效果,看下面这个例子:

color of shadow               暗影色彩

box-shadow的四个参数:

box-shadow:<length> <,CSS3入门教程(5):背景图片(背景大小和多背景图);length> <length> <length> || <color>

box-shadow这个属性利用的十分广泛,可以使你的元素立即变得美丽起来,只是记得不要把值设得太离谱。

<!DOCTYPE html>
<html>
<head>,CSS3入门教程(4):关于阴影;
<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中):


(责任编辑:网站建设)
CSS3基础教程:box-shadow属性相关文章
上一篇:css3圆角IE的兼容方法 下一篇:CSS3基础教程:详解background-size
回到顶部