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 相关文章推荐
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 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 json_encode奇怪问题说明
2011/09/27 PHP
php使用google地图应用实例
2014/12/31 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
jQuery对val和atrr("value")赋值的区别介绍
2014/09/26 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
js实现简单的验证码
2015/12/25 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
手把手教你python实现SVM算法
2017/12/27 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
PyTorch基本数据类型(一)
2019/05/22 Python
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
异常和异常类的概念
2014/09/12 面试题
党的生日活动方案
2014/08/15 职场文书
结婚保证书
2015/01/16 职场文书
画展邀请函
2015/01/31 职场文书
销售内勤岗位职责
2015/02/10 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python