CSS3之box-shadow--阴影外阴影与外发光
2024-09-05 14:41:32
基础语法
外阴影：box-shadow:X Y Npx #color;
内阴影：box-shadow:inset X Y Npx #color;
第一个属性：阴影的X轴(可以使用负值)
第二个属性：阴影的Y轴(可以使用负值)
第三个属性：阴影的像素（大小）
第四个属性：阴影的颜色
内阴影：inset 这个可以设置内部阴影 具体看示例4
注：此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6,span,a等)不是用来设置文字阴影 如果设置文字阴影请参考:text-shadow
示例1
使用样式：box-shadow:0px 0px 8px #f00;因没有使其它X轴与Y轴移动 所在会在本身发生作用 后面的属性我想做前端的应该很明白了
示例2
使用样式：box-shadow:3px 3px 8px #f00;这时候与上面的不同 X轴与Y轴改变了 所以变成了这样
示例3
使用样式：box-shadow:-2px 0px 8px #f00,0px -2px 8px #000,0px 2px 8px #9e038a,2px 0px 8px #0f0;也许你看到这样的代码会感觉很乱 但是看到效果图片之后我想你就能立刻懂得这是怎么做的了无非改一下X轴与Y轴与颜色值 还有阴影大小
示例4——内阴影
样式使用：box-shadow: inset 0px 0px 30px red;与上面的相同 唯一不同的是添加了一个inset 其它属性与外阴影相同
最新文章
- selenium自动化-java-IE启动
- 关于如何在cenos7.0上实现mysql数据库远程连接
- linux笔记八---------文件查找
- 项目经验之:MVVM初学者图形化笔记整理。。。
- 10.11 noip模拟试题
- Javascript进阶篇——( JavaScript内置对象---下)--Array数组对象---笔记整理
- cent os安装filebeat
- elast alert
- Oracle数据库分区相干知识点
- http中的get和post的区别
- 在ubuntu16安装supervisor 并 启动 .net core.
- Codeforces Beta Round #11 A. Increasing Sequence 贪心
- 【美食技术】家庭自制DIY鸡蛋饼和疙瘩汤早餐视频教程
- IIS部署网站常见问题
- docker-4-镜像
- Redhat安装配置VNC服务器
- 【BZOJ】1798: [Ahoi2009]Seq 维护序列seq 线段树多标记（区间加+区间乘）
- nhibernate 3.x新特性
- vi 中插入当前时间
- FileProvider记录下