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的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 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
轻松修复Discuz!数据库
2008/05/03 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
Javascript alert消息换行的方法
2013/08/07 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
javascript 闭包详解
2015/02/15 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
django 消息框架 message使用详解
2019/07/22 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
斯福泰克软件测试面试题
2015/02/16 面试题
旅游管理实习自我鉴定
2013/09/29 职场文书
学生会竞选自荐信
2013/10/12 职场文书
数学教育专业求职信
2014/07/22 职场文书
出售房屋委托书范本
2014/09/24 职场文书
工程部文员岗位职责
2015/02/04 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
Python作用域和名称空间的详细介绍
2022/04/13 Python