border和padding之间差1px

border和padding之间差1px,求解。。。

clipboard.png

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        div{
            width: 500px;
            height: 300px;
            padding: 10px;
            border: 5px solid rgba(255,0,0,0.5);
            background-clip: padding-box;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器缩放100%:
clipboard.png

阅读 2.9k
4 个回答

没问题,正常的

改为下面这样,估计你就看不出来了

 background-clip: border-box;

但这样绘制背景的区域包括了边框,但你边框设置的半透明,所以边框颜色会有变化

没问题。。。。正常的

复制代码正常的,如果你看到不正常,ctrl + '+'放大一下就正常了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题