是否有CSS hack只从1 div获得以下外观？

Question

以下是我正在制作的网页部分的模型图片。

我遇到问题的部分是带有白色边框的浅灰色框，在深灰色框内;因为我必须使用的是我的内容管理系统吐出的单个div。如果我嵌套了div，我会知道如何做到这一点，但我没有这个（除非我想添加花哨的JavaScript）。

我创建了一个JSFiddle，它提供了手头问题的基本设置：http://jsfiddle.net/ytq3grwd/

仅使用CSS可以解决此问题吗？如果是这样，怎么样？

Answer 1

您可以使用边框和框阴影：

#only-div {
    padding: 10px;
    background: #E7E2E2;
    border: 10px solid #C8C5C5;
    box-shadow: inset 0 0 1px #fff;
}

<强> jsFiddle example

Answer 2

您可以使用outline：

#only-div {
    padding: 10px;
    background: #E7E2E2;
    border: 1px solid #fff;
    outline: 10px solid #c8c5c5;    
}

Updated Fiddle

CanIUse - Outline

Answer 3

我认为你要找的是同时使用边框和轮廓。 updated fiddle

#only-div
{
    padding: 10px;
    background: #E7E2E2;
    border:1px solid #fff;
    outline:10px solid #C8C5C5;     
}