前端视觉优化（一）CSS边框阴影、四周阴影讲解
先上一个代码
通俗讲解吧，分5个参数
1.控制水平位置阴影，+为右边，0为中间（即两边都有，通过参3控制大小）
2.控制垂直方向阴影，+为下边，0为中间（即两边都有，通过参3控制大小）
3.模糊距离
4.阴影尺寸 （所谓向外延伸） （3和4实际效果有丢丢区分，自己调一下即可）
5.阴影颜色
·
·
·
其实有6个参数，以下是官方文档
h-shadow 必需。水平阴影的位置。允许负值。 测试
v-shadow 必需。垂直阴影的位置。允许负值。 测试
blur 可选。模糊距离。 测试
spread 可选。阴影的尺寸。 测试
color 可选。阴影的颜色。请参阅 CSS 颜色值。 测试
inset 可选。将外部阴影 (outset) 改为内部阴影。
·
本人亲调，十分顺眼 哈哈
box-shadow: 0 0 5px 1px #999
·
2020.12.22补充
- 对上面内容微调了一下
- 阴影是可以做成彩虹光晕那样子的，因为是可以同时设置多个背景阴影。即：box-shadow:5个参数，5个参数，5个参数。
应该都能看懂吧，要通过外延这个属性，把最底部的颜色拉出来一些，才不会被上面的覆盖（第一次逗号前颜色在最上面）
eg:box-shadow:1px 1px 3px red,2px 2px 3px yellow,3px 3px 3px orange
- 想要做成发光效果，就是白色阴影，配合明亮色背景，就有发光感觉
- 还有内阴影的，就是颜色参数后面加一个inset，一般用于点击或者hover动画
前端视觉优化（一）CSS边框阴影、四周阴影讲解相关推荐
- css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
- Retina时代的前端视觉优化
随着New iPad的发布,平板也将逐渐进入Retina时代,在高分辨率设备里图片的显示效果通常不尽人意,为了达到最佳的显示效果就需要对图片进行优化,这里介绍一些优化方法: 一.用CSS替代图片 这一 ...
- CSS 边框 圆角 盒子阴影 圆角 solid dotted dashed
用来单独设置覆盖 边框 阴影 圆角
- 前端性能优化—将CSS文件放在顶部
CSS文件放置在head中和放在body底部,对CSS本身的下载时间不会有影响,但对页面的呈现有非常大的影响,与用户体验密切相关. CSS文件放在顶部的原理: 1) CSS的下载是按照其在文档中出现的 ...
- css 中实现四周阴影
.shade {/* 要设置 x 轴和 y 轴的阴影都是 0 */box-shadow: 0 0 10px rgba(0, 0, 0, .2); } 效果如下:
- 前端总结·基础篇·CSS（二）视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- html form阴影,HTML CSS边框阴影的实现
一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器. CSS边框阴影 ...
- CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- 0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新
文章目录 1. 盒子模型(CSS重点) 1.1 看透网页布局的本质 1.2 盒子模型(Box Model) 1.3 盒子边框(border) 1.3.1 边框综合设置 1.3.2 example01 ...
最新文章
- excel大学计算机试题,大学计算机基础 excel测试题 求答案~~喵~~
- 【Spring】依赖注入 加载顺序
- 数学--数论--HDU 4675 GCD of Sequence(莫比乌斯反演+卢卡斯定理求组合数+乘法逆元+快速幂取模）
- CCF201803-1 跳一跳
- java游戏贪吃蛇_Java实现贪吃蛇游戏
- 离线语音控制并不等于本地语音识别
- 关于SSMS显示select出来的数据行的疑问
- ZXing拍码后区分扫描到的是一维码、二维码、其他码，android音视频面试
- 京东方高级副总裁姜幸群：AIoT技术赋能企业物联网转型
- 当你第一次发送ping请求包，ARP缓存表为空时会发生什么？（详细解析全过程）
- C#.NET程序尝试—修复Excel批注错误
- 实验四 进程同步与通信(一)进程同步与互斥1
- Android取消EditText自动默认获取焦点行为
- django之十一--开发一个简单的醉得意菜单和人均支付金额查询页面
- ps—人物夸张的漫画
- 【mac】取消crashx代理后上不了网
- XBanner实现3D画廊效果
- 【Luat-air105】1.air105资料整理及点灯
- AttributeError：部分初始化的模块没有属性...（Python）
- TCP/IP协议族名称和国际网络组织名称的缩写和全称