帶邊框的CSS邊框/輪廓

Question

我正在嘗試創建一個可重用的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中，不會在邊框上出現填充。 好像輪廓偏移被忽略了。

鏈接到我網站上的文章

如何獲得可以產生預期結果的跨瀏覽器類？

Answer 1

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而不是邊框​​或輪廓。 這使您可以根據需要擁有任意數量的“邊界”。

 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> 

Answer 2

嘗試嵌套div。

HTML：

<div class="article-quote-outer">
  <div class="article-quote-inner">
    {text goes here}
  </div>
</div>

CSS：

.article-quote-outer {
  padding: 12px;
  background-color: white;
}

.article-quote-inner {
  border: 1px solid silver;
  padding: 15px;
}

示例： JSFIDDLE

Answer 3

如果期望的結果是銀色邊框周圍沒有空白，請刪除該行：

輪廓偏移：-10px;