box-shadow是CSS3的属性,目的是给盒子添加一个或多个阴影。怎么感觉有点像光明使者使用该法术照亮敌人的阴暗面?

box-shadow一共有六个属性,请看:

box-shadow: h-shadow  v-shadow  [blur]  [spread]  [color]  [insert];

让我们来用中文翻译一遍:

box-shadow: x-offset  y-offset  [阴影模糊半径]   [阴影扩展长度]   [阴影颜色]   [内置阴影]

上面打了中括号的都是可选的。

一般阴暗面都是在敌人的背后或内心,此文所讲的box-shadow也不例外,它在盒子的背后或者内置。如果不设置 阴影模糊半径(blur)和阴影扩展长度(spread),那么阴影与盒子是一样的大小。如果不设置某些值将之显现出来,是根本看不到的。

接下来解释一下这些属性:

1、h-shadow(x-offset):距离盒子左侧的长度值。为0px,则阴影的左侧与盒子的左侧一致,如果为5px,则阴影的左侧距离盒子左侧5px;

2、v-shadow(y-offset):距离盒子顶部的长度值。为0px,则阴影的顶部与盒子的顶部一致,如果为5px,则阴影的顶部距离盒子顶部5px。如下图:

红色的是边框,黑色的是阴影。因为没有设置blur和spread的值,所以阴影的大小与盒子是一样的,但是阴影在盒子背后。

3、blur(阴影模糊半径):该值不能为负值,且该值越大,阴影就越模糊,阴影面积就越大。如下图所示:

blur为0时,阴影不会模糊:

blur为5px时:

blur为25px时,阴影变得更模糊,且模糊半径更大:

4、spread(阴影扩展长度):该值可为正负值。如果为正值,如50px,则表示在阴影的每个边都外延50px个长度。如果为负值,如-50px,则表示在阴影的每个边都内缩50px个长度。

spread为0时:

spread为25px时:

spread为-10px时:

5、color(阴影颜色):设置阴影的颜色。就如上图,阴影的颜色被设置为black。虽然该值为可选参数,但是建议每次都显示指定。

可以用如下方式指定阴影的颜色:

a.直接写颜色名称,如black;

b.使用rgb(r,g,b),如rgb(255,0,0);

c.使用rgba(r,g,b,alpha),如rgba(255,0,0,0.5)。alpha指透明度,取值0~1之间,值越大,越不透明;

d.使用#FF0000这种方式。

以上讲的都是外阴影,即阴影在盒子外部。接下来讲一讲内阴影。

6、inset(内置阴影):如果不设置该值,阴影就是外置的(outset);否则就会将阴影内置到盒子中。

首先看一看阴影模糊半径:

再看一看设置了h-shadow和v-shadow的效果:

是不是感觉和外置阴影不一样?肯定的嘛,内置阴影和外置阴影的效果是相反的。

外置阴影的模糊半径是由四个边向外扩展,而内置阴影的模糊半径是向内扩展。

内置阴影的h-shadow和v-shadow隔离出来的就是内置阴影的面积。看懂了吧!

接下来看一下内置阴影spread的设置:

由此看来,不管是外置阴影,还是内置阴影,针对spread来说,只要为正值,就是扩展阴影面积;只要为负值,就是缩减阴影面积。

以上是添加一个阴影的做法,其实还可以添加多个阴影,每个设置之间用半角逗号“,”隔开。如下图所示:

如果添加了多个阴影,都设置了阴影模糊半径,那么最终的阴影模糊颜色是它们的综合。如:

上面最后一张图片是它们模糊后颜色的综合。

本篇文章的最后,让我们来制作一个太阳,象征着重庆的天气-_-!!!,热火朝天哟!

每天CSS学习之box-shadow的更多相关文章

  1. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  2. 【转】css学习专题-BFC

    css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...

  3. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  4. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  5. CSS学习笔记(1):选择器

    一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> < ...

  6. CSS学习中的瓶颈期深入分析

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  7. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. 算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...

  9. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

  10. CSS学习之float解析

    转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或 ...

随机推荐

  1. SQL左右连接中的on and和on where的区别

    SQL左右连接中的on and和on where的区别 左联时,ON后面的对左边表的条件对左边表数据无影响(因为左连接符合左边所有条件),但对右边表数据有影响,只有符合左边表条件时,右边表数据才会查出 ...

  2. 环境变量LD_LIBRARY_PATH的传递

    http://bbs.chinaunix.net/thread-3680861-1-1.html execv明显没有传环境变量,execle或execve才会带在启动shell设置的LD_LIBRAR ...

  3. 《HTTP 权威指南》笔记:第十二章 基本认证体制

    导言 客户端可以通过网络来得到想要的信息,但是有一些信息并不能是对所有人都能看到的,因此必须有一种认证机制.服务器需要通过这种方式来了解用户身份,一旦服务器知道了用户的身份,就可以让用户能够访问请求的 ...

  4. GreenDao使用解析

    GreenDao是一个轻量级的数据库框架,相比Xutils 等他的速度和效率会更快更好 这里展示GreenDao 的使用方法 ①建立 compile 'org.greenrobot:greendao: ...

  5. android -------- Android Studio调试运行时ADB not responding

    最近有我朋友问我一个android studio的调试运行问题,我记得以前也是遇到过得,所以 来写一下    ADB not responding.If you'd like to retry, th ...

  6. test example

    #coding=utf-8 import os import caffe import numpy as np root='/home/xxx/caffe/' #根目录 deploy=root + ' ...

  7. 电影《Green book》观后感_已补全:携带着种族歧视的“光环”,艰难地获得朋友的相互依赖,依然得享受生活的酸甜苦咸。

    目录 1.电影基本情况介绍 2.故事整个发展经历 3.观影感受 4.网友评论 <Green book>--绿皮书 作者总共看这部影片三次,第一次英文版慢看,第二次中文版快看,第三次中文版总 ...

  8. python基础之小数据池,is和==区别 编码问题

    主要内容 小数据池,is和==区别 编码问题 小数据池 一种缓存机制,也称为驻留机制,是为了能更快提高一些字符串和整数的处理速度is 和 == 的区别 == 主要指对变量值是否相等的判断,只要数值相同 ...

  9. Xor-MST CodeForces - 888G (最小生成树,分治)

    大意: n结点无向完全图, 给定每个点的点权, 边权为两端点异或值, 求最小生成树

  10. 『MXNet』第九弹_分类器以及迁移学习DEMO

    解压文件命令: with zipfile.ZipFile('../data/kaggle_cifar10/' + fin, 'r') as zin: zin.extractall('../data/k ...