关于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. 第二章 linux不为人知的命令

    文件和目录命令 cd /home 进入 home目录' cd ..返回上一级目录 pwd显示当前工作路径 ls查看目录中的文件 ls -l 显示文件和目录的详细资料(可简写为ll),后可跟具体文件名 ...

  2. 访问阿里云 vue项目的 127.0.0.1:+ip

    vue 127.0.0.1 将  localhost 改为 0.0.0.0 原理看下面链接 参考: https://www.cnblogs.com/sddai/p/9281189.html

  3. html--前端基本标签内容讲解

    body里面分为两类标签:块级标签和内联标签. 1.块级标签:<p><h1><table><ol><ul><form><d ...

  4. java 多态调用

    1. 调用成员变量:编译.运行都看左边.2. 调用成员方法:编译看左边,运行看右边.  ----------  instanceof 判断某个对象是否属于某种数据类型: boolean  b  = 对 ...

  5. Windbg Assembly Code(反汇编)窗口的使用

    在WinDbg中,可以通过输入命令(u, ub, uu (Unassemble))或使用反汇编窗口查看程序汇编代码. 如何打开 DissAssembly Code窗口 通过菜单View-->Di ...

  6. 动态内存管理：malloc/free/new/delete/brk/mmap

    这是我去腾讯面试的时候遇到的一个问题——malloc()是如何申请内存的? c++ 内存获取和释放 new/delete,new[]/delete[] c 内存获取和释放 malloc/free, c ...

  7. 洛谷 P1801 黑匣子_NOI导刊2010提高（06） 题解

    昨晚恶补了一下二叉堆的内容 然后就找了几个二叉堆的题来做awa 然后发现用二叉堆做这题复杂度是O(nlogn) 但是有O(n)的解法 (某大佬这么说) 思路大概就是: 利用一个大根堆一个小根堆来维护第 ...

  8. Powershell更新

    问题:在vin7电脑启动vagrant up 提示powershell版本过低. 在vin7电脑启动vagrant up 提示powershell版本过低: The version of powers ...

  9. 配置MySQL主从复制和读写分离

    实验环境 序号 主机名 IP地址 备注 1 mysql-master 192.168.204.201 MySQL主库 2 mysql-slave 192.168.204.202 MySQL从库 3 a ...

  10. Redis读写分离技术解析

    背景 云数据库Redis版不管主从版还是集群规格,replica作为备库不对外提供服务,只有在发生HA的时候,replica提升为master后才承担读写流量.这种架构读写请求都在master上完成, ...