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 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 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 Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
python去除字符串中的换行符
2017/10/11 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
Sanic框架路由用法实例分析
2018/07/16 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python实现扫雷游戏
2020/03/03 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
三年大学自我鉴定
2014/01/16 职场文书
中考标语大全
2014/06/05 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
龙猫观后感
2015/06/09 职场文书
看上去很美观后感
2015/06/10 职场文书
房贷收入证明范本
2015/06/12 职场文书
母亲节感言
2015/08/03 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers