css 背景颜色与边框颜色差不多 边框显示不明显问题
1、问题
代码:
结果:
2、结果解决方法:
方法1、
代码:
结果:
方法2、
代码:
2、结果
完成代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < meta http-equiv="X-UA-Compatible" content="IE=edge"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < title >Document</ title > < style > html, body { width: 100%; height: 100%; background: #cdcdcd; overflow: hidden; } /* background-clip的值 padding-box: 从padding区域(不含padding)开始向外裁剪背景。 border-box: 从border区域(不含border)开始向外裁剪背景。 content-box: 从content区域开始向外裁剪背景 */ div { width: 20.4167vw; height: 18.5185vh; margin: 18.5185vh auto; /* border: 1.4815vh solid rgba(255, 255, 255, 0.4); */ border-radius: 1.8519vh; box-sizing: border-box; background: #FFF; /* background-clip: padding-box; */ padding: 3.5185vh 1.6667vw; font-size: 2.2222vh; color: #42525D; outline: 1.4815vh solid rgba(255, 255, 255, 0.4); } </ style > </ head > < body > < div >数据测试哈哈</ div > </ body > </ html >ps |
background-clip 属性规定背景的绘制区域。
background-clip的值
padding-box: 从padding区域(不含padding)开始向外裁剪背景。
border-box: 从border区域(不含border)开始向外裁剪背景。
content-box: 从content区域开始向外裁剪背景
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库