css3 box-shadow阴影(外阴影与外发光)讲解
基础说明:
外阴影: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轴移动 设置值 所在会在本身发生作用 半径范围,颜色)
测试2: <div style="box-shadow:4px 4px 10px #f00; border:1px solid green"></div> box-shadow:4px 4px 10px #f00;与测试1不同 X轴与Y轴改变了正值(正值 向右 向下) 所以变成了这样
测试3:<div style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></div> box-shadow:-4px -4px 10px #f00;与测试2不同 之处是 X轴与Y轴改变成了负值(负值 向左 向上) 所以变成了这样
同理:你可以测试下一正值,一负值的效果,这里就不做测试了。。。。。。。。
测试4:<div style="box-shadow:-10px 0px 10px red, /*左边阴影*/
0px -10px 10px #000, /*上边阴影*/
10px 0px 10px green, /*右边阴影*/
0px 10px 10px blue;" /*下边阴影*/ ></div>
你看到这样的代码会感觉很乱 但是看到效果图片之后你就能明白这是怎么做的了无非改一下X轴与Y轴位置与颜色值 还有阴影值大小,(用逗号隔开)多练习几次就好
测试5:--内阴影 <div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div> box-shadow: 0px 0px 10px red inset; 与上面写法相同 唯一不同的是添加了一个inset 其它属性与外阴影相同
百变不离其宗,练习就能熟悉,懂了就知道原理,随意改写,在配合css3的动画效果, 闪光层(字)都很简单实现。。希望对你有帮助。。
转载于:https://www.cnblogs.com/telwanggs/p/7736454.html
css3 box-shadow阴影(外阴影与外发光)讲解相关推荐
- Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例 向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
- CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
- 【box-shadow盒子内边阴影外阴影】
box-shadow属性 用于设置盒子阴影效果 盒子外阴影 box-shadow:[左右阴影偏移距离(px)] [上下阴影偏移距离(px)] [模糊程度(px)] [模糊距离(px)] [颜色] [左 ...
- html中投影效果图,利用CSS3(box shadow)制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
- Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
- CSS3 box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)...
CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果,该属性几乎可以让你完成你想要的任何阴影效果.然而 box-shadow 属性语法和取值非常灵活,对于新手有点不容易理解.今天总 ...
- CSS3 box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)
CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果,该属性几乎可以让你完成你想要的任何阴影效果.然而 box-shadow 属性语法和取值非常灵活,对于新手有点不容易理解.今天总 ...
- Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
- css3 box-shadow阴影(内外阴影与发光)讲解
基础说明: 外阴影:box-shadow: X轴 Y轴 Rpx color; 属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影 ...
最新文章
- 澎思科技成立新加坡研究院,将与多家机构合作研发自动驾驶等项目
- 【linux高级程序设计】(第十五章)UDP网络编程应用 2
- 英语发音规则---N字母
- C++基本操作符重载
- 张帅用赢球庆生 搭档斯托瑟晋级澳网女双八强
- 传输层的TCP和UDP
- 【转】Xcode 7 真机调试详细步骤
- 2020跨境电商独立站将喷发式增长?
- Java中判断当前数据是否全为数字
- 微型计算机的输入 输出设备PPT,(微型计算机系统模型).ppt
- 怎么判断有用户在远程连接目标电脑_你的电脑是肉鸡吗?
- CentOS6.4 X86_64 kvm+PXE备忘
- 非线性控制4——李雅普诺夫稳定性理论
- C++/MFC 串口通讯——光源控制器控制
- Matlab二元函数图像绘制
- php在线图片签名,ElementUi+Vue+Php+fpdf+fpdi 实现文档在线签订(图片水印、手写签名)...
- unity 陶瓷质感_Unity2D:简单自动瓷砖(Tile)的实现
- 华为语音解锁设置_华为设置语音服务功能
- 2021年最火的前端框架
- poj-2251 Dungeon Master【bfs】
热门文章
- 3gpp协议_春天工作室lt;3GPP规范翻译系列gt;1:TS37340协议翻译(导读)第一部分...
- List大坑集「锦」
- html 缩小页面 重叠,如何获得两个平行四边形完美重叠并在HTML中动态调整大小?...
- 患者数据库mysql_关系型数据库之MySQL基础总结_part1
- (30)FPGA米勒型状态机设计(一段式)(第6天)
- Xilinx PCIE IP核接口介绍
- java九年_Java 9明年9月釋出正式版
- 2021-03-10 模板扩展类调用模板基类成员函数
- Qgis3.2编译移植成功文档完整版
- vector容器动态申请内存的过程_记录一次自定义Allocator profile的过程