关于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. 201871010109-胡欢欢《面向对象程序设计（java）》第四周学习总结会

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  2. HDU - 5126： stars （求立方体内点数 CDQ套CDQ）

    题意:现在给定空空的三维平面,有加点操作和询问立方体点数. 思路:考虑CDQ套CDQ.复杂度是O(NlogN*logN*logN),可以过此题. 具体的,这是一个四维偏序问题,4维分别是(times, ...

  3. 重新学习Spring注解——声明式事务

    36.声明式事务-环境搭建 37.声明式事务-测试成功 38.[源码]-声明式事务-源码分析 /** * 声明式事务: * * 环境搭建: * 1.导入相关依赖 * 数据源.数据库驱动.Spring- ...

  4. python语言(六)mock接口开发、发邮件、写日志、新Excel操作

    一.urllib模块 urllib模块是一个标准模块,直接import urllib即可,在python3里面只有urllib模块,在python2里面有urllib模块和urllib2模块. url ...

  5. postMessage的使用

    一.简介 1.postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档.多窗口.跨域消息传递 2.postMessage(data,origin)方法接受两个参数 ...

  6. [RN] React Native 中使用 stickyHeaderIndices 实现 ScrollView 的吸顶效果

    React Native中,ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果. 例如下面代码中: <ScrollView showsVert ...

  7. c# HttpClient的HTTP/2支持

    HTTP/2 是 HTTP 协议的主要修订版.HTTP/2 的一些显著功能是支持标头压缩和通过同一连接完全多路复用流.虽然 HTTP/2 保留了 HTTP 的语义(HTTP 标头.方法等),但它在数据 ...

  8. [NOI2010]超级钢琴 主席树

    [NOI2010]超级钢琴 链接 luogu 思路 和12省联考的异或粽子一样. 堆维护n个左端点,每次取出来再放回去次 代码 #include <bits/stdc++.h> #defi ...

  9. requests.session()会话保持

    可能大家对session已经比较熟悉了,也大概了解了session的机制和原理,但是我们在做爬虫时如何会运用到session呢,就是接下来要讲到的会话保持. 首先说一下,为什么要进行会话保持的操作? ...

  10. C# byte数组与16进制间的相互转换

      1.byte数组转16进制字符串 /// <summary> /// 将一个byte数组转换成16进制字符串 /// </summary> /// <param na ...