为 DIV 边框添加描边效果答案

【问题标题】：Add stroke effect to DIV border为 DIV 边框添加描边效果
【发布时间】：2013-07-03 16:07:42
【问题描述】：

我需要创建一个带有自定义边框的 HTML div。根据设计师告诉我，边框半径为3px，描边为8px，颜色为f7f7f7，位置在外面

到目前为止我所拥有的是：

div#content {
    padding                 :   10px 20px;
    border-style                :   solid;
    border-width                :   8px;
    border-color                :   #F7F7F7;
    -webkit-border-radius       :   3px;
    -moz-border-radius          :   3px;
    border-radius               :   3px;

}

我真的不知道描边效果是什么，用css怎么做。

【问题讨论】：

标签： html css

【解决方案1】：

Stroke 基本上意味着轮廓或边框 - 这是它的专业名称。你的代码看起来不错。没用吗？

它适用于jsFiddle。它会创建一个带有一点圆角的粗浅灰色边框。

另外，您可以使用简写：border: 8px solid #f7f7f7;

【讨论】：

好的，感谢您的回答，目前我还没有设计。但我不确定中风效应是什么。我想我的代码很好

【解决方案2】：

我理解所概述的“中风”，就像通常所说的文字效果一样。我会去的，因为轮廓对半径不友好：

div {
    border:solid; /* no info for size nor color yet */
    box-shadow: 0 0 0 8px #f7f7f7;
    border-radius:3px; /* prefix not needed anymore */
}

【讨论】：

【解决方案3】：

您正在寻找的是边框：虚线；如果设计师说中风，很可能他们的意思是虚线。我已经更新了 Yotam 的小提琴

border-style : dashed;

jsfiddle

【讨论】：

在任何设计程序中向框/对象添加描边只会创建一个实心边框。恕我直言，Yotam 是对的。