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支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 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
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
Python中内置的日志模块logging用法详解
2016/07/12 Python
python之django母板页面的使用
2018/07/03 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
学生会个人自荐书范文
2014/02/12 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
课外科技活动总结
2014/08/27 职场文书
丧事答谢词
2015/01/05 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技