css - 需要向空 div 添加 3px 的填充...我无法访问标记，只能访问 css

Question

我的任务是对一个网站进行更改，但我不确定是否可行。

我们有一个元素，它是一张由 3px 填充、1px 边框和阴影包围的图像。

上图就是你想要的样子

这看起来不像他们想要的那样。

我们还有另一个元素，它是一个带有背景颜色集的空 div。设计师希望这两个看起来一样，但我只能访问CSS。有什么方法可以使用伪选择器让它看起来相同吗？

这是 CSS:

    float: left;
    height: 23px;
    margin: 3px;
    width: 23px;
    padding:2px;
    border:1px solid #d4d4d4;
    box-shadow:3px 3px 4px rgba(0,0,0,0.1);
     -moz-box-shadow:3px 3px 4px rgba(0,0,0,0.1);
     -webkit-box-shadow:3px 3px 4px rgba(0,0,0,0.1);      

Answer 1

您可以使用outline属性，该属性在border之外绘制。

Example

background:lightblue;
height: 23px;
margin: 3px;
width: 23px;
padding:2px;
border:3px solid white;
outline:1px solid #d4d4d4;

编辑:轮廓将覆盖您的投影，因此请向您的 box-shadow 属性添加一个展开值:

box-shadow:3px 3px 4px 1px rgba(0,0,0,0.1);
-moz-box-shadow:3px 3px 4px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:3px 3px 4px 1px rgba(0,0,0,0.1);