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发光分享按钮的实现教程
Sep 06 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 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入门学习的几个不错的实例代码
2008/07/13 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
深入apache host的配置详解
2013/06/09 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
eclipse创建python项目步骤详解
2019/05/10 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Python如何绘制日历图和热力图
2020/08/07 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
口头翻译求职人自荐信
2013/12/07 职场文书
行风评议整改报告
2014/11/06 职场文书
2014年团支部工作总结
2014/11/17 职场文书
上诉状格式
2015/05/23 职场文书
狂人日记读书笔记
2015/06/30 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
导游词之长城八达岭
2019/09/24 职场文书
详解Python常用的魔法方法
2021/06/03 Python