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 相关文章推荐
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 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
多重?l件?合查?(一)
2006/10/09 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
php实用代码片段整理
2016/11/12 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
一个JS翻页效果
2007/07/23 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
python名片管理系统开发
2020/06/18 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
品恩科技软件测试面试题
2014/10/26 面试题
小学亲子活动总结
2014/07/01 职场文书
法定代表人授权委托书
2014/09/19 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python