关于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. 微信小程序，相关代码

    table th:nth-of-type(1) { width: 200px; } 代码 作用 bindtap bindload 当图片载入完毕时触发,event.detail = {height, ...

  2. mysql数据库锁的机制-one

    锁概念 : 当高并发访问同一个资源时,可能会导致数据不一致,需要一种机制将用户访问数据的顺序进行规范化,以保证数据库数据的一致性.锁就是其中的一种机制. 举例 :以买火车票为例,火车票可面向广大消费者 ...

  3. java 的守护进程脚本

    #!/bin/sh ] do Tag=`ps -ef|grep 'jar包名称'|grep -v grep|wc -l|awk '{printf $1"\n"}'` ] then ...

  4. LeetCode 1216. Valid Palindrome III

    原题链接在这里:https://leetcode.com/problems/valid-palindrome-iii/ 题目: Given a string s and an integer k, f ...

  5. zzulioj - 2618: ACM-ICPC亚洲区域赛ZZULI站

    题目链接; http://acm.zzuli.edu.cn/problem.php?id=2618 题目描述 玩了这么多游戏,V决定还是去做几道ACM题练练手,于是翻到了一道201X年ACM/ICPC ...

  6. Pandas | 11 字符串函数

    在本章中,我们将使用基本系列/索引来讨论字符串操作.在随后的章节中,将学习如何将这些字符串函数应用于数据帧(DataFrame). Pandas提供了一组字符串函数,可以方便地对字符串数据进行操作. ...

  7. idea启动java项目,使用调试会占用更多内存

    idea启动java项目,使用调试会占用更多内存

  8. 将python项目.py文件打包成.exe文件

    安装pyinstaller包 pip3 install pyinstaller 如果不行 pip3 install pyinstaller -i https://pypi.doubanio.com/s ...

  9. [RN] React Native 好用的时间线 组件

    React Native 好用的时间线 组件 效果如下: 实现方法: 一.组件封装 CustomTimeLine.js "use strict"; import React, {C ...

  10. 踩iviewui中Select 选择器两级联动，重置查询条件时第二级数据无法清除的坑

    小颖公司最近做的项目用的vue+iviewui+axios,在做项目的过程中,遇到一个问题: 二级联动的下拉框,第一个下拉框一直都有值,第二个下拉框是在选择了第一个下拉框之后采取调用ajax获取其值, ...