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中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
php数据序列化测试实例详解
2017/08/12 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Python检测QQ在线状态的方法
2015/05/09 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
师范生实习个人的自我评价
2013/09/28 职场文书
司机辞职报告范文
2014/01/20 职场文书
教师节领导致辞
2015/07/29 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
为Centos安装指定版本的Docker
2022/04/01 Servers
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis