css3 box-shadow阴影(外阴影与外发光)图示讲解


Posted in HTML / CSS onAugust 11, 2017

基础说明:

    外阴影:box-shadow: X轴  Y轴  Rpx  color;

    属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值(大小)    阴影的颜色

    内阴影:box-shadow: X轴  Y轴  Rpx  color  inset;

    默认是外阴影   内阴影:inset 可以设置成内部阴影

    注(PS):此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影   如果设置文字阴影请参考知识点:text-shadow(同理)

     因为是新属性,为了兼容各主流浏览器并支持这些主浏览器的较低版本,基于主流浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式,欧朋浏览器  -o-box-shadow   IE>9  -ms-box-shadow   

基础练习:

为了更好的了解box-shadow的特征,做几个小测试:(为了方便直接在标签内嵌套样式)

测试1: <div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div>  box-shadow: 0 0 10px #f00  (因没有使其X轴与Y轴移动 设置值 所在会在本身发生作用   半径范围,颜色)

css3 box-shadow阴影(外阴影与外发光)图示讲解

测试2: <div style="box-shadow:4px 4px 10px #f00; border:1px solid green"></div> box-shadow:4px 4px 10px #f00;与测试1不同 X轴与Y轴改变了正值(正值 向右 向下) 所以变成了这样‍

css3 box-shadow阴影(外阴影与外发光)图示讲解

测试3:<div style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></div> box-shadow:-4px -4px 10px #f00;与测试2不同 之处是 X轴与Y轴改变成了负值(负值 向左 向上) 所以变成了这样‍

css3 box-shadow阴影(外阴影与外发光)图示讲解

同理:你可以测试下一正值,一负值的效果,这里就不做测试了。。。。。。。。

测试4:<div  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/
                    0px -10px 10px #000,  /*上边阴影*/
                    10px 0px 10px green,  /*右边阴影*/
                    0px 10px 10px blue;" /*下边阴影*/
       </div>

你看到这样的代码会感觉很乱 但是看到效果图片之后你就能明白这是怎么做的了无非改一下X轴与Y轴位置与颜色值 还有阴影值大小,(用逗号隔开)多练习几次就好

css3 box-shadow阴影(外阴影与外发光)图示讲解

测试5:--内阴影  <div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset;    与上面写法相同 唯一不同的是添加了一个inset 其它属性与外阴影相同

css3 box-shadow阴影(外阴影与外发光)图示讲解

百变不离其宗,练习就能熟悉,懂了就知道原理,随意改写,在配合css3的动画效果, 闪光层(字)都很简单实现。。希望对你有帮助。。

HTML / CSS 相关文章推荐
CSS3简单实现照片墙
Dec 12 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
css3之UI元素状态伪类选择器实例演示
Aug 11 #HTML / CSS
CSS3系列之3D制作方法案例
Aug 14 #HTML / CSS
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 #HTML / CSS
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 #HTML / CSS
详解CSS3开启硬件加速的使用和坑
Aug 21 #HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 #HTML / CSS
纯CSS实现预加载动画效果
Sep 06 #HTML / CSS
You might like
PHP+MySQL修改记录的方法
2015/01/21 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Python实现按中文排序的方法示例
2018/04/25 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python如何实现递归转非递归
2021/02/25 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
护士辞职信范文
2014/01/19 职场文书
高级工程师英文求职信
2014/03/19 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书