重磅来袭!原来阴影可以这样玩?

HTML5学堂:有阴影的地方,必定有光,每一个物体都会有一个阴影与它如影随形。当然在页面制作中,我们使用到的标签也是有着各种各样不同的阴影效果的,比如模块的外发光、元素的背光阴影等等。针对这些效果,作为前端的我们又该如何去操作,是使用图片来替代?还是考虑代码操作呢?

本文主要内容

1. CSS3的阴影介绍

2. 盒阴影语法

3. 盒阴影的特征

4. CSS3盒阴影特效

5. 总结

1. CSS3的阴影介绍

阴影可以分文字阴影和盒模型阴影(简称“盒阴影”)。盒阴影与文本阴影一样,都可以代替具有阴影效果的图片来使用,以减少页面对服务器的请求压力。在使用方面来说,text-shadow 是用来制作文本阴影,而box-shadow主要实现的是图层阴影。当然我们有时候会用盒阴影来代替边框使用,这是因为盒阴影不占物理空间,而边框会占据空间,导致了移动端设置自适应宽度受到了精准度的影响,那么接下来我们来看看盒阴影是怎么使用的!

2. 盒阴影语法

2.1 box-shadow的语法

box-shadow: X-offset Y-offset blur-radius spread-radius color inset;

简单的解释如下:

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

注意:box-shadow也可以使用多组数值,如果使用多组值必须使用逗号“,”分开。

2.2 语法分析:

box-shadow属性最多可以有6个参数的设置,它们各自的含义以及取值如下:

1)X轴偏移量:指阴影水平偏移量,其值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;

2)Y轴偏移量:指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部;

3)阴影模糊半径:此参数是可选,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

4)阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小;

5)阴影颜色:此参数可选,可以使用rgba、颜色单词等方式来书写;

6)X阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果设置阴影类型为“inset”时,其投影就是内阴影。

3. 盒阴影的特征

给大家介绍盒阴影之前,还是需要先把今天用到的公共代码先整理出来。如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>CSS3盒阴影</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">
        .wrap {
            width: 1000px;
            height: 1500px;
            margin: 100px auto;
        }
        .wrap div {
            float: left;
            width: 200px;
            height: 100px;
            margin: 60px 0 0 30px;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div class="wrap clearfix">
        <div>HTML5学堂-码匠</div>
        <div class="outer">
            <div class="inter"> </div>
        </div>  
        <div>HTML5学堂-码匠</div>
        <div>HTML5学堂-码匠</div>
        <div>HTML5学堂-码匠</div>
        <div>HTML5学堂-码匠</div>
        <div>HTML5学堂-码匠</div>
        <div class="drop-shadow">HTML5学堂-码匠</div>
    </div>
</body>
</html>

3.1 阴影的默认状态

较之ps制作出来的图片相比,CSS3的box-shadow可以通过改变其参数得到不同的效果,如:改变阴影偏移量的设置,我们可以使阴影只在对象的上下左右的任一边出现,也可以让其出现在其中的某几个边上;其二可以随时调节阴影大小,边缘模糊度,阴影颜色;其三可以随时更改为内阴影,另外还可以设置多个阴影效果。

接下来我们先来看一个实例:

.wrap div:nth-child(1) {
    box-shadow: 5px 5px 5px;
}

效果如下:

回到上例来,在并没有给出具体的阴影颜色的情况下,这个小块有了一个黑色的外延阴影出现,即为box-shadow的默认状态。

3.2 阴影是否会影响内容?

把外层div设置为100px*100px,里面div设置为60px*60px,并在里面的div上加上一个向下向右偏移50px的绿色阴影,我们看看多出来的阴影会怎么样?

.wrap .outer {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    background: #fff;
}
.wrap .outer .inter {
    width: 60px;
    height: 60px;
    margin: 10px auto;
    background: #ccc;
    box-shadow: 50px 50px 0 0 green;
}

效果如下:

从上图效果我们可以看出,阴影多出来的部分会撑破容器跑出来。所以在阴影偏移、阴影扩展以及阴影模糊的作用下,对象的阴影仅仅只是一个层级上的展示,并不会影响到内容。

3.3 盒阴影与边框的比较

首先来看一个使用盒阴影制作的带有边框的效果,如下:

.wrap div:nth-child(3) {
    box-shadow: 0 0 0 1px red;   
}

效果如下:

大家来想想这种效果是不是跟我们在元素中的boder: 1px solid red;属性产生的效果很相似?对的,box-shadow不单可以制作出阴影的效果,还可以利用其扩展半径这个值,来给对象制作出类似于边框的样式。下面我们来看一个对比的实例:

.wrap div:nth-child(3) {
    box-shadow: 0 0 0 1px red;   
}
.wrap div:nth-child(4) {
    border: 1px solid red;   
}

效果如下:

实际上利用box-shadow来制作边框,只能说看上去像边框,但实质其并非边框,它和border还是有本质上的区别的。从上图中可以发现左右两边的模块有点参差不齐,如果需要这种不齐的效果更明显一些,只需要把其扩展半径值变大,使得两者之间的相差更大即可,如:

.wrap div:nth-child(5) {
    box-shadow: 0 0 0 20px red;   
}
.wrap div:nth-child(6) {
    border: 20px solid red;
}

效果如下:

我们接着来看上述两个例子在Chrome下的layout图:

结合两者在Chrome下的layout图,更证实了我们前面所讲的阴影不会影响页面的任何内容与布局。第一个块的阴影被浏览器忽略不计,并不算做内容的大小,但是第二个块的边框被计算了大小。所以借住这个特点,我们盒阴影所模拟的边框是可以被自由使用的,但必须要注意其层级关系。

4. CSS3盒阴影特效

前面我们主要举例说明了如何利用box-shadow给元素加上阴影效果、阴影对布局有无影响以及如何应用阴影模仿元素边框效果等。这些都是我们box-shadow常用的一些阴影效果,下面我们再来例举几个特殊的实例:内阴影inset、body设置阴影和投影Drop-shadow效果。

4.1 内阴影inset

此效果的制作比较简单,只需要把默认的outset改成inset即可,如下:

.wrap div:nth-child(7) {
    box-shadow: 0 0 25px 0 red inset;
}

下图即是实现块上添加内阴影的效果:

4.2 body设置阴影

使用阴影来为body设置一个朦胧的样式,如下:

body:before {
    position:fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    content:"";
    z-index: 999;
    box-shadow: 0 0 40px rgba(255,0,0,0.9);
}

效果如下:

上述书写中需要提醒大家,为了不影响布局,top的取值最好和height的取值一致,只是top使用负值。利用同样的方法我们可以给任何一个元素加上阴影,但相应需要改变其定位方式。

4.3 Drop-shadow效果

通过box-shadow实现Drop-shadow效果是仅用一个div标签元素,然后配合其两个伪元素":before"和":after";最后分别给其伪元素定位到div的后面,并把box-shadow应用到这两个伪元素上。具体我们来看其实现步骤:

1、先为定义了叫做"drop-shadow"的div设置一个基本的样式:

.wrap .drop-shadow {
    position: relative;
    width: 300px;
    height: 150px;
    margin-left: 100px;
    background: #ccc; 
}

2、接着给drop-shadow的“:before”和":after"定位到drop-shadow的下面,并且给drop-shadow的":before"和":after"加上阴影效果。

.drop-shadow:before,
.drop-shadow:after {
    position: absolute;
    content: "";
    left: 10px;
    bottom: 15px;
    width: 50%;
    height: 20%;
    max-width: 150px;
    z-index: -1;
    /*add box-shadow*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
}

3、现在只得到了一边的阴影效果,那我们可以通过应用CSS3的transforms来实现另一边的效果,并且需要改变":after"伪元素定位方向(伪元素":after"在相反方向旋转,相对于":before")。

.drop-shadow:before,
.drop-shadow:after {
    position: absolute;
    content: "";
    left: 10px;
    bottom: 15px;
    width: 50%;
    height: 20%;
    max-width: 150px;
    z-index: -1;
    /*add box-shadow*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    /*add css3 transform*/
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.drop-shadow:after {
    right:10px;
    left: auto;
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
    transform:rotate(10deg);
}

4、Drop-shadow最终核心代码如下所示,只是我们在“:before”和“:after”中加了一个"max-width"的限制。

.wrap .drop-shadow {
    position: relative;
    width: 300px;
    height: 150px;
    margin-left: 100px;
    background: #ccc; 
}
.drop-shadow:before,
.drop-shadow:after {
    position: absolute;
    content: "";
    left: 10px;
    bottom: 15px;
    width: 50%;
    height: 20%;
    max-width: 150px;
    z-index: -1;
    /*add box-shadow*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    /*add css3 transform*/
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.drop-shadow:after {
    right:10px;
    left: auto;
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
    transform:rotate(10deg);
}

Drop-shadow的效果如下:

5. 总结

那么今天我们对于CSS3的box-shadow的讲解就到这里了,到现在为止主要与大家探讨和学习了CSS3的圆角border-radius及文本阴影text-shadow。最后不能不说的是,CSS3的强大功能一直是网站样式中细节处理的强力保证,大家应该多做了解与学习。

本文系HTML5学堂独家内容,转载请在文章开头显眼处注明作者和出处“HTML5学堂(http://www.h5course.com/)”

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-11-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端布道

CSS技巧和经验

1. 如何清除图片下方出现几像素的空白间隙 方法1 img { display: block; } 方法2 img { ...

3467
来自专栏向治洪

react-native 之布局总结

前言 之前我们讲了很多react-native的基础控件,为了方便大家的理解,我们来对react-native的布局做一个总结,观看本节知识,你将看到。 宽度单...

3418
来自专栏coding for love

CSS入门12-浮动与清除浮动

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

511
来自专栏张俊红

网页的修饰

总第61篇 上一篇推送了网页的基本构成,链接地址:网页是怎么构成的?,这篇来讲讲网页的修饰,正如字面意思一般,本篇分享的内容是用来修饰网页的,是让网页变得更加好...

3557
来自专栏企鹅号快讯

前端学习自学笔记:day09

今天是第九天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第九天的笔记:HTML AND CSS: -复...

1676
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之padding

1、padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸;②width非auto,padding影响尺寸;③wi...

2807
来自专栏分享达人秀

TextView属性和方法大全

前面简单学习了一些Android UI的一些基础知识,那么接下来我们一起来详细学习Android的UI界面基本组件。 一、认识TextView 我们知道前面学习...

1955
来自专栏Java Edge

CSS 全解析实战(三)-CSS 基础1 选择器(1)背景非布局样式(边框)非布局样式(滚动)非布局样式(文本折行)非布局样式(装饰性属性)hack和案例(1)hack和案例(2)面试题

421
来自专栏河湾欢儿的专栏

浮动与清除浮动

浮动 float半脱离文档流(对元素,脱离文档流;对内容,在文档流) 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了...

651
来自专栏性能与架构

CSS选择器的性能优化

CSS选择器的性能排名(从最快者开始): (1)识别器:#id (2)类:.class (3)标签:div (4)相邻兄弟选择器:a + i (5)父类选择器:...

2967

扫描关注云+社区