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区域开始向外裁剪背景
