类似于上面的Lea Hayes，但我是这样做的:

div { 背景:# 999; 身高:100 px; 宽度:200 px; 边框:#999实心1px; border - radius: 10 px; 保证金:15 px; Box-shadow: 0px 0px 0px 1px #fff插入; ｝ < div > < / div >

没有必要嵌套DIVs或jQuery，尽管为了简洁起见，我省略了一些CSS的-moz和-webkit变体。你可以看到上面的结果

我通常使用:after伪元素来完成这个任务:

当然，这取决于使用情况，这种方法允许控制单个边界，而不是使用硬阴影方法。

你也可以设置-1px偏移量，并使用背景线性渐变(无边框)再次获得不同的效果。

身体{ 保证金:20 px; ｝ 一个{ 背景:# 999; 填充:10px 20px; border - radius: 5 px; 文字修饰:没有; 颜色:# fff; 位置:相对; 边框:2px实心#000; ｝ {后 内容:”; 显示:块; 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; border - radius: 5 px; 边框:2px实体#ccc; ｝ < a href = " # " > < / >按钮

类似于上面的Lea Hayes，但我是这样做的:

div { 背景:# 999; 身高:100 px; 宽度:200 px; 边框:#999实心1px; border - radius: 10 px; 保证金:15 px; Box-shadow: 0px 0px 0px 1px #fff插入; ｝ < div > < / div >

没有必要嵌套DIVs或jQuery，尽管为了简洁起见，我省略了一些CSS的-moz和-webkit变体。你可以看到上面的结果

outline样式:auto已经拥有完全的浏览器支持很久了。

速记是:

outline: auto blue;

这让你设置自定义颜色，但不是自定义厚度，不幸的是(尽管我认为浏览器的默认厚度是一个很好的默认)。

您还可以在使用outline-style: auto时设置自定义outline-offset。

outline: auto blue;
outline-offset: 0px;

正如其他人所说，只有firefox支持这个功能。这里有一个工作，做同样的事情，甚至工作与虚线轮廓。

.has-outline { 显示:inline-block; 背景:# 51 ab9f; border - radius: 10 px; 填充:5 px; 位置:相对; ｝ .has-outline:{后 border - radius: 10 px; 填充:5 px; 边框:2px虚线#9dd5cf; 位置:绝对的; 内容:”; 上图:2 px; 左:2 px; 底部:2 px; 右:2 px; ｝ < div class = " has-outline”> 我能画出轮廓 < / div >

尝试使用填充和背景色的边框，然后为轮廓边框:

.round_outline {
  padding: 8px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid black;
}

对我来说很管用。