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中currentColor关键字的妙用
Feb 27 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 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实时显示输出
2008/10/02 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php 面向对象的一个例子
2011/04/12 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
php cli 小技巧
2013/06/03 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
google地图的路线实现代码
2009/08/20 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
简单了解python单例模式的几种写法
2019/07/01 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
高中生自我评语大全
2014/01/19 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
cf战队收人广告词
2014/03/14 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
防卫过当辩护词
2015/05/21 职场文书
2015年暑假工作总结
2015/07/13 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫