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 3D制作实战案例分析
Sep 18 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
html5实现滑块功能之type="range"属性
Feb 18 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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数据库密码的找回的步骤
2011/01/12 PHP
url decode problem 解决方法
2011/12/26 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
PHP导入导出Excel代码
2015/07/07 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
python不同系统中打开方法
2020/06/23 Python
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
C++面试题目
2013/06/25 面试题
电大学习个人自我评价范文
2013/10/04 职场文书
对标管理实施方案
2014/03/12 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
党员承诺书怎么写
2014/05/20 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
六年级小学生评语
2014/12/26 职场文书
离婚协议书怎么写
2015/01/26 职场文书
2015中秋祝酒词
2015/08/12 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python