带边框的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中，边框不会出现填充。好像轮廓偏移被忽略了。

Link to article on my website

如何设置可以产生所需结果的跨浏览器类？

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;