其用法为:

 代码如下 复制代码
box-shadow: x-offset y-offset blur spread color inset;
上述六个参数含义依次是水平方向的偏移(正值向右偏移,负值向左偏移)、垂直方向的偏移(正值向下偏移,负值向上偏移)、模糊距离、阴影的尺寸(扩展尺寸)、阴影的颜色以及阴影类型(默认是外阴影,使用inset表示为内阴影)。除了第一和第二个参数是必须的,其他的都是可选参数。当使用参数“0 0px 10px #333”时,注意第三个参数为阴影的模糊距离。

由于参数本身就多,而且还可以变,下面通过一些例子来加深一下理解。

先来看看什么是阴影,下面通过四个宽和高都为70px的div,使用如下box-shadow来看看显示效果:

 代码如下 复制代码
#d1 { box-shadow:0 0 0px #333;}

#d2 { box-shadow:70px 0 0px #333;}

#d3 { box-shadow:0 70px 0px #333;}

#d4 { box-shadow:70px 0px 0px #333;}

观察上述图,可以理解阴影其实是被原始块对象遮盖,但是可以通过x-offset和y-offset来移动阴影(相对于原始快对象)。

现在通过3个70x70px的div来看看模糊的效果,box-shadow设置如下:

 代码如下 复制代码
#d5 { box-shadow:0 0 10px 0px #333;}

#d6 { box-shadow:70px 70px 20px 0px #333;}

#d7 { box-shadow:70px 70px 40px 0px #333;}

模糊就是对阴影由内到进行模糊处理,www.111cn.net/对比d6和d7,可以看到模糊参数值越大,模糊的面积也越大。

最后来看看看模糊距离参数,box-shadow设置如下:

 代码如下 复制代码
#d8 { box-shadow:0px 0px 0px 10px #333;}

#d9 { box-shadow:80px 80px 0px 10px #333;}

#d10 { box-shadow:80px 80px 10px 10px #333;}

原文:http://www.111cn.net/cssdiv/css/50547.htm

css3 box-shadow 使用方法详解的更多相关文章

  1. php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz)

    原文:php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz) 折腾了两天,dwz删除后,数据不能自动刷新,解决方案,直接看图  . 1. 删除.修改状态后无法刷新记录: 在dwz. ...

  2. python中验证码连通域分割的方法详解

    python中验证码连通域分割的方法详解 这篇文章主要给大家介绍了关于python中验证码连通域分割的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用python具有一定的参考学习价值,需 ...

  3. session的使用方法详解

    session的使用方法详解 Session是什么呢?简单来说就是服务器给客户端的一个编号.当一台WWW服务器运行时,可能有若干个用户浏览正在运正在这台服务器上的网站.当每个用户首次与这台WWW服务器 ...

  4. Kooboo CMS - Html.FrontHtml[Helper.cs] 各个方法详解

    下面罗列了方法详解,每一个方法一篇文章. Kooboo CMS - @Html.FrontHtml().HtmlTitle() 详解 Kooboo CMS - Html.FrontHtml.Posit ...

  5. HTTP请求方法详解

    HTTP请求方法详解 请求方法:指定了客户端想对指定的资源/服务器作何种操作 下面我们介绍HTTP/1.1中可用的请求方法: [GET:获取资源]     GET方法用来请求已被URI识别的资源.指定 ...

  6. ecshop后台增加|添加商店设置选项和使用方法详解

    有时候我们想在Ecshop后台做个设置.radio.checkbox 等等来控制页面的显示,看看Ecshop的设计,用到了shop_config这个商店设置功能 Ecshop后台增加|添加商店设置选项 ...

  7. (转)Spring JdbcTemplate 方法详解

    Spring JdbcTemplate方法详解 文章来源:http://blog.csdn.net/dyllove98/article/details/7772463 JdbcTemplate主要提供 ...

  8. C++调用JAVA方法详解

    C++调用JAVA方法详解          博客分类: 本文主要参考http://tech.ccidnet.com/art/1081/20050413/237901_1.html 上的文章. C++ ...

  9. windows.open()、close()方法详解

    windows.open()方法详解:         window.open(URL,name,features,replace)用于载入指定的URL到新的或已存在的窗口中,并返回代表新窗口的Win ...

  10. CURL使用方法详解

    php采集神器CURL使用方法详解 作者:佚名  更新时间:2016-10-21   对于做过数据采集的人来说,cURL一定不会陌生.虽然在PHP中有file_get_contents函数可以获取远程 ...

随机推荐

  1. Codeforces CF#628 Education 8 A. Tennis Tournament

    A. Tennis Tournament time limit per test 1 second memory limit per test 256 megabytes input standard ...

  2. 微信公共平台开发-(.net实现)2--ACCESSTOKEN值获得

    成功的走出第一步后,我们紧接着趁热打铁开始下一步: 成为了开发者之后微信平台会给您AppId和AppSecret,在订阅号中是没有的,所以因该申请一下服务号, 若没有请注意上一篇http://www. ...

  3. Ubuntu中文输入法的添加

    做了一个英文环境的Ubuntu14.04LTS,为了写博客方便,添加了中文输入法,在网上搜寻了一堆方法,最后找到个靠谱的. 1 添加fcitx输入法框架.(在此框架下有各种输入法) sudo add- ...

  4. Java 集合系列 17 TreeSet

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

  5. Windows Azure 上的 Symfony,适用于 PHP 开发者的强大组合

     发布于 2014-06-13 作者 陈 忠岳 Symfony 是针对 PHP 开发者的流行开源 Web 应用框架.现在,您可以更轻松地在 Windows Azure 上使用它,这都归功于 Ben ...

  6. CANoe 入门 Step by step系列(三)简单例子的剖析【转】

    最好的学习方式是什么?模仿.有人会问,那不是山寨么?但是我认为,那是模仿的初级阶段,当把别人最好的设计已经融化到自己的血液里,变成自己的东西,而灵活运用的时候,才是真正高级阶段.正所谓画虎画皮难画骨. ...

  7. 第十二次oo作业

    作业十二 规格化设计简介 规格化设计的发展历史 1950年代,第一次分离,主程序与子程序的分离结构是树状模型,子程序可先于主程序编写.通过使用库函数来简化编程,实现最初的代码重用.产生基本的软件开发过 ...

  8. 查看Linux服务器是否是虚拟机

    dmidecode -s system-product-name 物理机: [root@swnode1]# dmidecode -s system-product-name I840-GS 虚拟机: ...

  9. xcode - 显示安装过的低版本模拟器

    1. 更改版本

  10. 【转】cve-2013-2094 perf_event_open 漏洞分析

    cve-2013-2094是于2013年4月前后发现的linux kernel本地漏洞,该漏洞影响3.8.9之前开启了PERF_EVENT的linux系统.利用该漏洞,通过perf_event_ope ...