CSS3中box-shadow的用法介绍


Posted in HTML / CSS onJuly 15, 2015

一般我们通过box-shadow来设置盒阴影,但是有些属性我们一般没有用到,这篇文章将对box-shadow属性进行逐个分析。
语法

CSS Code复制内容到剪贴板
  1. E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}  

即:

对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

    inset 投影方式
    此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值“inset”, 其投影就是内阴影;
    x-offset
    水平方向的偏移量;
    y-offset
    垂直方向的偏移量;
    blur-radius模糊半径
    可选,只能为整数,值越大阴影就越模糊;
    spead-radius扩展半径
    可选,可以为正数或者负数,如果为负数,整个阴影将会缩小;
    color阴影颜色
    可选,如果不设定值,浏览器将会采用其默认色,默认色一般是黑色。

一般我们很少用到inset和spead-radius这两个属性,如果运用好这两个属性可以制作出非常酷炫的效果。

DEMO

HTML / CSS 相关文章推荐
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
举例详解CSS3中的Transition
Jul 15 #HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 #HTML / CSS
初探CSS3中的calc()功能
Jul 14 #HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 #HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 #HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 #HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 #HTML / CSS
You might like
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
php下载远程文件类(支持断点续传)
2008/11/14 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
解析php中const与define的应用区别
2013/06/18 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
php微信公众号开发模式详解
2016/11/28 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Python命令行click参数用法解析
2019/12/19 Python
python实现门限回归方式
2020/02/29 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
中专生的个人自我评价
2013/12/11 职场文书
海飞丝的广告词
2014/03/20 职场文书
读书小明星事迹材料
2014/05/03 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
运动会演讲稿100字
2014/08/25 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
大学生实习证明
2015/06/16 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
古诗之感恩老师
2019/10/24 职场文书