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 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 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
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
详解Python正则表达式re模块
2019/03/19 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
如何写求职信
2014/05/24 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
使用Redis实现分布式锁的方法
2022/06/16 Redis