gpt4 book ai didi

html - 使用::after 和::before 超出填充边界

转载 作者:行者123 更新时间:2023-11-27 23:17:02 26 4
gpt4 key购买 nike

Text inside a blue box with a dashed line background, smaller red box behind and slightly offset

p {
background: rgba(80,150,220,1);
width: 100px;
height: 100px;
text-align:center;
}
p::before {
content="asdf";
background: rgba(220,150,80,1);
width = 50px;
height = 50px;
top = - 25px;
left = - 25px;
}
<!DOCTPE html>
<head>
</head>
<body>
<p>TEXT HERE</p>
</body>

不改变 HTML

这是我的尝试。如果您有任何更好的解决方案,请告诉我。

应该显示虚线,它只代表元素大小。

我试图将填充和边距保持为 0。

感谢您的帮助。

最佳答案

您可以指定填充和边距,但通过考虑与负边距相同的填充量,然后依赖于一些背景颜色,使它们在视觉上为 0:

.box {
width: 100px;
height: 100px;
margin: -20px 0 0 -20px;
padding: 20px 0 0 20px;
background:
/* Top red line (width:80% height:20px) */
linear-gradient(red,red) 0 0/80% 20px,
/* left red line (width:20px height:80%)*/
linear-gradient(red,red) 0 0/20px 80%,
/* Main background; color only the content area (not the padding)*/
rgba(80,150,220,1) content-box;
background-repeat:no-repeat;

text-align:center;
}
body {
padding:50px;
}
<div class="box">TEXT HERE</div>

如果你想使用伪元素:

.box {
width: 100px;
height: 100px;
text-align: center;
background: rgba(80, 150, 220, 1);
position: relative;
z-index: 0;
}

.box:before {
content: "";
position: absolute;
z-index: -1;
top: -20px;
left: -20px;
width: 80%;
height: 80%;
border-top: 20px solid red;
border-left: 20px solid red;
}

body {
padding: 50px;
}
<div class="box">TEXT HERE</div>

关于html - 使用::after 和::before 超出填充边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58221872/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com