css 背景颜色与边框颜色差不多 边框显示不明显问题
1、问题
代码:
结果:
2、结果解决方法:
方法1、
代码:
结果:
方法2、
代码:
2、结果
完成代码:
<!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区域开始向外裁剪背景