关于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. springCloud值Eureka

    Spring Cloud特点 约定优于配置 开箱即用.快速启动 适用于各种环境      PC Server  云环境  容器(Docker) 轻量级的组件  服务发现Eureka 组件的支持很丰富, ...

  2. [Algorithm] 53. Maximum Subarray

    Given an integer array nums, find the contiguous subarray (containing at least one number) which has ...

  3. bzoj2287【POJ Challenge】消失之物 缺一01背包

    bzoj2287[POJ Challenge]消失之物 缺一01背包 链接 bzoj 思路 分治solve(l,r,arr)表示缺少物品\([l,r]\)的dp数组arr. 然后solve(l,mid ...

  4. Ajax 与 Django

    目录 Django与AJAX orm优化查询: MTV 与 MVC模型 choices 参数 update 与 save的区别 AJAX导入: Jquery 实现AJAX ajax基本语法结构 原生J ...

  5. .net core 运行不需命令行

    1.问题情景: 需要保证已安装.net core SDK,并且命令提示符下运行“dotnet --version”,有反应. 如果之前运行良好,现在却不行了,查看安装程序中存在.net core SD ...

  6. leetcode-19：给定一个链表，删除链表的倒数第 n 个节点，并且返回链表的头结点。

    /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * Lis ...

  7. C#开源录音组件、录像组件、录屏组件及demo源码

    在多媒体系统中,一般都会涉及到录音.录像.录屏问题,采集得到的数据可以用来传输.播放.或存储.所以,对于像课件录制系统.语音视频录制系统.录屏系统等,多媒体数据的采集就是最基础的功能之一. MCapt ...

  8. 依赖注入之unity（winform方式）

    依赖注入之unity(winform方式) 要讲unity就必须先了解DI和IOC及DIP,如下链接提供DI和IOC的基础:https://www.cnblogs.com/zlp520/p/12015 ...

  9. 【计算机视觉】【ARM-Linux开发】Ubuntu14.04下安装opencv3(anaconda3 Python3.6)

    首先附上一个stackoverflow上看到的问题:https://stackoverflow.com/questions/38787748/installing-opencv-3-1-with-an ...

  10. cad 一个小技巧--复制视口带冻结信息

    cad使用 ctrl+c 和 ctrl+v 进行跨文件复制视口的时候,会出现复制视口冻结信息丢失,因为你只选择了视口进行复制, 如果要实现带上冻结信息,那么要把含有相关图层的图元一起 ctrl+c/v ...