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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 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时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
php随机显示图片的简单示例
2014/02/15 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
清空上传控件input file的值
2010/07/03 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
python使用mysql数据库示例代码
2017/05/21 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
市场调查策划方案
2014/06/10 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
房产协议书范本2014
2014/09/30 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
党纪处分决定书
2015/06/24 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP