首页 > web前端 > css教程 > 正文

css3中关于box-shadow外阴影以及外发光的示例详解(图)

黄舟
发布: 2017-07-21 13:58:11
原创
3830人浏览过

基础说明:

    外阴影:box-shadow: x轴  y轴  rpx  color;

    属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值(大小)    阴影的颜色

    内阴影:box-shadow: X轴  Y轴  Rpx  color  inset;

       默认是外阴影   内阴影:inset 可以设置成内部阴影

    注(PS):此属性使用于盒模型 如(p,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:

<p style="box-shadow: 0 0 10px #f00; border:1px solid green">
</p>  box-shadow: 0 0 10px #f00
登录后复制

(因没有使其X轴与Y轴移动 设置值 所在会在本身发生作用   半径范围,颜色)

 1770.png

 测试2:

<p style="box-shadow:4px 4px 10px #f00; border:1px solid green">
</p> box-shadow:4px 4px 10px #f00;
登录后复制

与测试1不同 X轴与Y轴改变了正值(正值 向右 向下) 所以变成了这样‍

1771.png

测试3:

<p style="box-shadow:-4px -4px 10px #f00; border:1px solid green">
</p> box-shadow:-4px -4px 10px #f00;
登录后复制

与测试2不同 之处是 X轴与Y轴改变成了负值(负值 向左 向上) 所以变成了这样‍

1772.png

同理:你可以测试下一正值,一负值的效果,这里就不做测试了。。。。。。。。

测试4:

<p  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/ 
0px -10px 10px #000,  /*上边阴影*/ 
10px 0px 10px green,  
/*右边阴影*/ 
0px 10px 10px blue;" 
/*下边阴影*/ 
></p>
登录后复制

你看到这样的代码会感觉很乱 但是看到效果图片之后你就能明白这是怎么做的了无非改一下X轴与Y轴位置与颜色值 还有阴影值大小,(用逗号隔开)多练习几次就好

1773.png

测试5:--内阴影  

<p style="box-shadow: 0px 0px 10px red inset; border:1px solid green">
</p> box-shadow: 0px 0px 10px red inset;
登录后复制

  与上面写法相同 唯一不同的是添加了一个inset 其它属性与外阴影相同

1774.png

百变不离其宗,练习就能熟悉,懂了就知道原理,随意改写,在配合css3的动画效果, 闪光层(字)都很简单实现。。希望对你有帮助。。

以上就是css3中关于box-shadow外阴影以及外发光的示例详解(图)的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号