我正在尝试创建一个可重用的 div css 类,我可以用它来突出显示我在竞选网站上撰写的文章中的引述。使用 Chrome(或 Firefox)在 Visual Studio 中调试时,我得到了想要的结果:
如您所见,有一个银色边框,但周围有填充。
我的 CSS 类是:
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
outline-style: solid;
outline-color: silver;
outline-width: 1px;
outline-offset: -10px;
text-align: center;
}
但是,在 Internet Explorer 中,边框不会出现填充。似乎轮廓偏移被忽略了。
我怎样才能设置一个跨浏览器的类来产生预期的结果?
最佳答案
Internet Explorer 不支持
outline-offset
。
您可以结合使用 outline
和 border
来达到同样的效果。
此处 border
用于银线,outline
用于元素周围的空白区域。
body {
background: #fffacf;
padding: 15px;
}
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
outline-style: solid;
outline-color: white;
outline-width: 10px;
text-align: center;
border: 1px solid silver;
}
<div class="articleQuote">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
另一种选择是使用 box-shadow
代替 border 或 outline。这允许您拥有任意多的“边框”。
body {
background: #e6e6e6;
padding: 15px;
}
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
text-align: center;
margin: 30px 0;
box-shadow: 0 0 0 1px silver,
0 0 0 10px white;
}
.crazy-border {
margin: 50px 10px;
box-shadow: 0 0 0 2px red,
0 0 0 4px white,
0 0 0 6px orange,
0 0 0 8px white,
0 0 0 10px gold,
0 0 0 12px white,
0 0 0 14px green,
0 0 0 16px white,
0 0 0 18px blue,
0 0 0 20px white,
0 0 0 22px purple;
}
<div class="articleQuote">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
<div class="articleQuote crazy-border">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
关于html - 带有外部填充的 CSS 边框/轮廓,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51445637/