您当前的位置:HTML5培训 > 前端开发 > CSS开发教程 >CSS阴影效果

CSS阴影效果

时间:2018-01-04 15:24 来源:CSS阴影效果讲解

CSS3中新增属性-阴影,可以做出很多漂亮的效果。作为一名web前端工程师掌握CSS阴影效果在今后的工作中是十分重要的,今天这篇文章将为大家详细讲解CSS阴影效果,想学习的伙伴们看过来了。

CSS3阴影之文本阴影

CSS3中新增属性-阴影,可以做出很多漂亮的效果。

文字阴影text-shadow

text-shadow属性值的顺序:

text-shadow: h-shadow v-shadow blur color;

参数分别表示水平阴影位置,垂直阴影位置,模糊半径,阴影颜色。

一个例子:

CSS3阴影

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style  type="text/css">
        p{
            margin: 0;
            font-family: helvetica,arial,sans-serif;
            color: #999;
            text-align: center;
            font-size:80px;
            font-weight:bold;
            text-shadow:10px 10px #333;
}
</style>
</head> 
<body>
<p>华清远见</p>
</body>
</html>

1.通过控制水平位移和垂直位移可以控制阴影偏向,正值偏右偏下。负值偏左偏上。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style  type="text/css">
        p{
            margin: 0;
            font-family: helvetica,arial,sans-serif;
            color: #999;
            text-align: center;
            font-size:80px;
            font-weight:bold;
            text-shadow:-10px -10px #333;
}
</style>
</head>
<body>
<p>华清远见</p>
</body>
</html>

如图:

CSS阴影

2.可以修改模糊半径来控制阴影的模糊程度:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style  type="text/css">
        p{
            margin: 0;
            font-family: helvetica,arial,sans-serif;
            color: #999;
            text-align: center;
            font-size:80px;
            font-weight:bold;
            text-shadow:10px 10px 30px #333;
}
</style>
</head>
<body>
<p>华清远见</p>
</body>
</html>

如图:

CSS阴影

 

也可以定义多个阴影用逗号隔开:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style  type="text/css">
        p{
            margin: 0;
            font-family: helvetica,arial,sans-serif;
            color: #fff;
            text-align: center;
            font-size:80px;
            font-weight:bold;
            text-shadow:20px 50px 10px #600,
                        30px -10px 10px #060,
                        -40px 20px 10px #006;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>

如图:

3.可以来点特效,比如燃烧:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style  type="text/css">
        body{background:#000;}
        p{
            margin: 0;
            padding:24px;
            font-family: helvetica,arial,sans-serif;
            color: #000;
            text-align: center;
            font-size:80px;
            font-weight:bold;
            text-shadow:0 0 4px #fff,
                        0px -5px 4px #ff3,
                        2px -10px 6px #fd3,
                        -2px -15px 11px #f80,
                         2px -25px 18px #f20;
}
</style>
</head>
<body>
<p>华清远见</p>
</body>
</html>

如图:

4.浮雕效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3阴影</title>
<style  type="text/css">
        body
        {
            background:#ccc;
}
        p{
            margin: 0;
            padding:24px;
            font-family: helvetica,arial,sans-serif;
            color: #d1d1d1;
            background:#ccc;
            text-align: center;
            font-size:80px;
            font-weight:bold;
            text-shadow:-1px -1px #fff,
                         1px 1px #333;
}
</style>
</head>
<body>
<p>华清远见</p>
</body>
</html>

如图:

CSS3阴影之盒子阴影

盒子阴影 box-shadow

box-shadow属性值的顺序:

box-shadow: x-offset y-offset blur-radius spread-radiuscolor;

参数分别表示X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径阴影颜色。

浏览器的兼容:

为了兼容各主流浏览器并支持这些主流浏览器的较低版本,在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。

#sbox{

width: 200px;

padding: 32px;

background: #3385ff;

text-align: center;

-webkit-box-shadow:5px 5px 10px black;

-moz-box-shadow: 5px 5px 10px black;

box-shadow: 5px 5px 10px black;

}

注意:出于方便,后文的css属性有的地方只写了box-shadow属性,没有写-moz-和-webkit-前缀的形式,在使用中不要忘记加上。

为了更清楚的了解box-shadow的特征,做几个小测试,看效果:

相关代码:

<div class="obj box-shadow-1"></div>
<div class="outer">
<div class="inner"></div>
</div>
<div class="obj  box-shadow-2"></div>
<div class="obj  box-shadow-3"></div>
<div class="obj  box-shadow-4"></div>
<div class="obj  box-shadow-5"></div>
<div class="obj  box-shadow-6"></div>
<div class="obj  box-shadow-7"></div>
<div class="obj  box-shadow-8"></div>
<div class="obj  box-shadow-9"></div>

结论:

1) 从.box-shadow-1的效果可以得出不指定属性阴影颜色的情况下,阴影在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色。

2) 从内外两个div块inner、outer的对比来看,所有支持box-shadow的主流浏览器都表现为:内层阴影撑破外层容器将整个阴影效果呈现出来。W3C标准用图示的方式对box-shadow的原理和表现进行了解读:

3).box-shadow-2是xy没有偏移,阴影大小10px,没有扩展半径,颜色#0CC即rgba(0, 204,204, 1),这里我们使用的是颜色HEX值;效果

而. box-shadow-3是在. box-shadow-2效果的基础上,应用了rgba颜色值,好处是给box-shadow阴影添加了alpha透明效果。效果:

. box-shadow-4在. box-shadow-2效果的基础上添加了阴影扩展半径15px。

CSS阴影

. box-shadow-5在. box-shadow-2效果的基础上,将外阴影设为内阴影。

CSS阴影

4). box-shadow-6一个元素使用了多个阴影,多个阴影之间用逗号分隔。给对象四边设置阴影效果,我们是通过改变x-offset和y-offset的正负值来实现,其中x-offset为负值时,生成左边阴影,为正值时生成右边阴影,y-offset为正值是生成底部阴影,为负值时生成顶部阴影。并且把模糊半径设置为0,如果不设置为0的话那么其他三边也将会有阴影。这点需要注意!

CSS阴影

注意这样的写法是错误的:{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green}

并且此处还涉及到一个多阴影的顺序问题。当给同一个元素使用多个阴影属性时,需要注意它的顺序,最先写的阴影将显示在最顶层,如. box-shadow-7设为不同的模糊值:

.box-shadow-7{box-shadow:0 0 10px 5px black,0 0 10px 20px red;}

将能看出层叠的顺序效果:

如果将两个阴影效果调一下,改为如下:

.box-shadow-8{ box-shadow:0 0 10px 20px red,0 0 10px 5px black;}

将只显示红色的阴影效果,因为红色阴影层在上面,模糊半径大,将后面的黑色阴影完全遮挡。

CSS阴影

最新开班
名师视频 更多>>
HTML5入门视频教程

主讲人:Xena|238人观看

开始听课
HTML5基础视频教程

主讲人:Scorpio|5501人观看

开始听课
H5课程之从零编写网页

主讲人:Wing|121人观看

开始听课
  • 北京

    010-82600385/6

    北京市海淀区西三旗悦秀路北京明园大学校内

  • 上海

    021-54485127

    上海市徐汇区漕溪路250号银海大楼11层

  • 深圳

    0755-25590506

    深圳市龙华新区人民北路美丽AAA大厦15层

  • 成都

    028-85405115

    成都武侯区科华北路99号科华大厦2层

  • 南京

    025-86551900

    南京市白下区汉中路185号鸿运大厦11层

  • 武汉

    027-87804688

    武汉工程大学卓刀泉校区科技孵化器大楼11层

  • 西安

    029-88756251

    西安市高新区高新1路12号天公大厦3层

  • 广州

    020-38342087

    广州市天河软件园柯木塱园5栋三层

  • 沈阳

    024-24349000

    沈阳市沈河区北顺城路137号锦峰大厦7层

  • 济南

    0531-88898293

    济南市高新区舜华路三庆世纪财富中心B3座6层

  • 重庆

    023-68064704

    重庆市九龙坡区渝州路87号双薪时代九楼

  • 长沙

    0731-88713136

    长沙市开福区芙蓉中路海东青大厦B座11楼

Copyright © 2004-2018 华清远见教育集团 版权所有,京ICP备16055225号,京公海网安备11010802025203号