问题描述
我想知道是否有可能在页面中突出显示(逻辑上)不可见的边距和填充。就像我们使用浏览器的检查器开发工具但永久一样。
目的是在浏览器中查看是否在逻辑思维中设置了边距和填充。
谢谢 尼古拉斯。
解决方法
没有直接的方法,但您可以使用 background
属性来实现相同的目的。从下面的代码中,您可以将 highlight-props
类名添加到应该突出显示道具的父元素中。
.parent {
background-color: var(--margin-color);
display: inline-block;
}
.child {
margin: 40px;
padding: 40px;
width: 100px;
height: 100px;
display: inline-block;
border: 30px solid grey;
}
.highlight-props {
--margin-color: orange;
--padding-color: blue;
--border-color: green;
--content-color: yellow;
}
.highlight-props > * {
background-image: linear-gradient(var(--content-color),var(--content-color)),linear-gradient(var(--padding-color),var(--padding-color));
border-color: var(--border-color);
background-clip: content-box,padding-box;
}
<div class="parent highlight-props">
<div class="child">
</div>
</div>