关于box-shadow的基本用法参阅CSS3 box-shadow一章节。

此属性用来设置元素的阴影效果，语法结构如下:

box-shadow:h-shadow v-shadow blur spread color inset;

下面通过代码实例介绍一下blur（模糊半径）和spread（扩展半径）参数的作用。

一.模糊半径:

blur参数规定模糊半径；W3C文档并没有具体规定使用哪种方式实现模糊功能。

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

.box{

  margin: 40px 0;

}

.ant{

  background:red;

  width: 100px;

  height: 100px;

}

.one{

  box-shadow: 110px 0 0 green;

}

.two{

  box-shadow: 110px 0 20px green;

}

.three{

  box-shadow: 110px 0 40px green;

}

</style>

</head>

<body>

  <div class="box">

    <div class="ant one"></div>

  </div>

  <div class="box">

    <div class="ant two"></div>

  </div>

  <div class="box">

    <div class="ant three"></div>

  </div>

</body>

</html>

分析如下:

（1）.当没有设置blur时，元素尺寸与阴影尺寸是一样的。

（2）.将blur设置为20px或者40px的时候，阴影的尺寸明显得到扩展。

（3）.模糊区域是，从没有设置blur时阴影的边缘，向两端扩展；在这个区域实现垂直或者水平类似于渐变的模糊效果（上面代码就是类似由内到外渐变）。第二个设置blur值为20px，那么模糊区域就是以未设置blur时阴影的边缘为中线分别向两侧延伸10px，于是红色元素和绿色阴影恰好衔接相邻，各个方位均是如此。

对于向内的inset阴影效果也是同样的原理，看如下代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

.box{

  margin: 20px 0;

}

.ant{

  background:red;

  width: 100px;

  height: 100px;

}

.one{

  box-shadow: 0 0 0 20px green inset;

}

.two{

  box-shadow: 0 0 10px 20px green inset;

}

</style>

</head>

<body>

  <div class="box">

    <div class="ant one"></div>

  </div>

  <div class="box">

    <div class="ant two"></div>

  </div>

</body>

</html>

运行效果截图如下：

模糊区域也是沿着上述类似的没有模糊效果时的边缘向两端延伸产生。

二.扩展半径：

spread参数比较好理解，它就是直接增加阴影的尺寸。

代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

.box{

  margin: 40px 0;

}

.ant{

  background:red;

  width: 100px;

  height: 100px;

}

.one{

  box-shadow: 130px 0 0 10px green;

}

.two{

  box-shadow: 130px 0 20px 10px green;

}

.three{

  box-shadow: 130px 0 40px 10px green;

}

</style>

</head>

<body>

  <div class="box">

    <div class="ant one"></div>

  </div>

  <div class="box">

    <div class="ant two"></div>

  </div>

  <div class="box">

    <div class="ant three"></div>

  </div>

</body>

</html>

上面代码运行效果截图如下：

spread参数直接扩展阴影的边缘，然后blur再以这个新边缘为标准进行前面介绍的模糊效果。

上面代码中，红色元素和绿色阴影之间的空隙尺寸是20px（阴影向外扩展了10px），再施加40px的模糊效果后，红色元素和绿色阴影能够恰好衔接在一起。

box-shadow 模糊半径与扩展半径的更多相关文章

  1. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  2. virtual box 5.2.12 扩展包安装

    http://download.virtualbox.org/virtualbox/     找到对应版本的virulbox去下载就可以了

  3. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  4. CSS3知识点整理&&一些demo

    css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出         http://codepen ...

  5. 来看看css3中的box-shadow

    不谈IE,只谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length ...

  6. CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  7. css中box-shadow阴影效果的使用

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  8. 【转】 CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  9. box-shadow讲解1

    谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length>?| ...

随机推荐

  1. 201671030103 实验十四 团队项目评审&课程学习总结

    项目 内容 这个作业属于哪个课程 任课教师首页链接 这个作业的要求在哪里 作业链接地址 课程学习目标 (1)掌握软件项目评审会流程 (2)反思总结课程学习内容 任务一: 团队项目Github仓库中提交 ...

  2. phpcms添加https后台分页错误的解决方法

    今天修改一位客户的phpcms网站,他要求添加https,这对ytkah来说是轻车熟路了,但是后台稍微有点问题,点击分页出现错误,将鼠标移到下一页显示的链接是https://www.abc.com/w ...

  3. Escape character is ‘^]’什么意思?怎么使用telnet

    在linux/unix下使用telnet(telnet ip 端口号)连接主机时提示“Escape character is '^]'.”,这是什么意思?“^”是Ctrl键的意思!1.这个提示的意思是 ...

  4. IE6兼容性bug汇总

    1.终极方法:条件注释 <!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本. <![endif]--> <!--[if gte IE 6]&g ...

  5. LNMP+memcached

    部署LNMP+memcached网站平台,通过PHP页面实现对memcached服务器的数据操作,实现以下目标:部署LNMP实现PHP动态网站架构为PHP安装memcache扩展创建PHP页面,并编写 ...

  6. 【树状数组】【P5069】[Ynoi2015]纵使日薄西山

    Description 给定一个长度为 \(n\) 的非负整数序列 \(\{a_n\}\),\(q\) 次操作,每次要么单点修改序列某个值,要么查询整个序列需要操作多少次才能变成全 \(0\). 一次 ...

  7. 【cf补题记录】Codeforces Round #607 (Div. 2)

    比赛传送门 这里推荐一位dalao的博客-- https://www.cnblogs.com/KisekiPurin2019/ A:字符串 B:贪心 A // https://codeforces.c ...

  8. 使用docker部署nginx+tomcat架构

    架构说明: 使用nginx+tomcat实现动态/静态(资源请求)分离和负载均衡. 参考文档: https://www.runoob.com/docker/docker-tutorial.html 配 ...

  9. Redis Zrevrank 命令

    Redis Zrevrank 命令返回有序集中成员的排名.其中有序集成员按分数值递减(从大到小)排序. 排名以 0 为底,也就是说, 分数值最大的成员排名为 0 . 使用 ZRANK 命令可以获得成员 ...

  10. 【BigData】Java基础_类和对象的基本使用

    1.需求描述 ①定义一个学生类,然后根据该类创建3个具体的学生对象 类中包含信息:学生姓名.学号.年龄.性别.所在地址 ②将这三个学生对象存入到数组中 ③然后将数组对象按照学生的年龄倒序排序 2.代码 ...