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实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 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入门基础之php代码写法
2011/12/30 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
PHP概率计算函数汇总
2015/09/13 PHP
PHP内核探索之变量
2015/12/22 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
jQuery实现评论模块
2020/08/19 jQuery
Vue实现圆环进度条的示例
2021/02/06 Vue.js
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
Python ellipsis 的用法详解
2020/11/20 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
红色旅游心得体会
2014/09/03 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书