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下的渐变文字效果实现示例
Mar 02 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 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+oracle 分页类
2006/10/09 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
初识Node.js
2015/03/20 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python动态参数用法实例分析
2015/05/25 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python多线程获取返回值代码实例
2020/02/17 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
动物科学专业毕业生的自我评价
2013/11/29 职场文书
会计人员岗位职责
2014/03/19 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
大学生团日活动总结
2015/05/06 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL