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截图_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 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
中国第一家无线电行
2021/03/01 无线电
解析php时间戳与日期的转换
2013/06/06 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python的mysqldb安装步骤详解
2017/08/14 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
联想德国官网:Lenovo Germany
2018/07/04 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
超市客服工作职责
2014/06/11 职场文书
悬空寺导游词
2015/02/05 职场文书
安全教育主题班会教案
2015/08/12 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技