.stitched {
padding: 20px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 10px;
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
}
看起来非常棒！！
这是一个很棒的技巧！
此外观的“关键”仅仅是代码行“border: 2px dashed #fff;”，以防有人想知道上面发生了什么……
当然，但是边框是如何进入元素内部的，或者背景是如何从元素中出来的？
我在这里没有看到任何background-origin……
那是box-shadow。
最简单的方法是使用outline和outline-offset。这样你就可以将border用于有用的东西
@Boxon Outline没有border-radius，这就是使用box-shadow的原因。
太棒了！我以为还有什么其他真正的技巧呢，哈哈。
这在Firefox或Chrome上不起作用。我使用了相同的代码。任何帮助将不胜感激！
看起来很棒！我认为添加以下内容后看起来会更好。:-)
border-bottom-left-radius: 3px 3px;
它真的很棒
很棒的代码片段
但在IE 7和8中不起作用，
请提供任何解决方案？
IE7和IE8不支持CSS3，而此代码使用了CSS3。
使用CSS3 PIE：http://css3pie.com/
谢谢各位提供的信息
看起来很棒！谢谢
我本会使用一个更简单的例子来演示缝合线外观
使背景颜色溢出边框的技巧是box-shadow的spreadradius（第四个元素，这里我设置为8px）
但并非所有版本的BRW都能正常使用此方法 :)
我希望这些帖子有可视化示例:/
尝试将其作为可视化示例。
边框
如果你的元素没有使用圆角，并且你不在乎IE6/7的支持，那么你可以使用虚线边框和outline属性来实现这一点，而不是使用box shadow。语法上它稍微简单一些，但效果大致相同。
但如果你使用圆角，那么你就不能使用outline，因为它看起来会很奇怪。;)
为了浏览器兼容性，你可以将这段长代码转换为以下代码
.stitched{
border:2px dashed #fff;
background: #ff0030;
box-shadow: 0 0 0 8px #ff0030;
}
这是主要的关键，对于一些样式…这完全取决于你…
webkit在explorer中不起作用…禁用IE…呵呵呵
太棒了~谢谢
http://codepen.io/A-Bit-Annoying/pen/1/1 – 演示
http://codepen.io/A-Bit-Annoying/pen/1/2 – 更新版本
你好，
如果这些代码片段有预览，我将不胜感激。对于像我这样的初学者来说，很难理解一些术语的含义或外观。不过，这是一个很棒的网站，并且非常有用！ :)
Nancie
查看此工具，用于抓取代码并立即对其进行操作（实时预览）：http://blog.codepen.io/2012/07/04/introducing-the-codepen-bookmarklet/
Codepen.com确实非常有用（如之前发布的“有点烦人”的代码）。类似的网站是：http://dabblet.com/
此外，在代码下方，有一个“参考网址”，它会链接到原始文章。但我同意，一些介绍和/或截图会更容易（但工作量更大…）。
@Chris Coyier; 对不起，由于最近的宗教争议，YouTube目前在我们国家被禁。
@Jacques; dabblet.com 真的很棒。结果可以立即观察到。
感谢分享。
有没有办法使虚线间隔更宽或更长？
而不是这样
这样做
– – – – – – – – – – –
或者这样
_
谢谢！
这看起来真的很棒。大约一年前，我在我的网站上使用了同样的灵感，只有一个区别——我使用了outline属性，而不是border。这样做的好处是border可以用于其他用途，坏处是border可以有侧面，比如顶部或左侧，但outline则会对称地环绕整个元素。
使用border或outline实现此效果的主要问题是进一步的行为——例如，尝试在任何方法（除了JavaScript）上使用流体宽度等高列，以及box-sizing: border-box;属性。
其他方法会使此技巧变得复杂
当拉伸到无限时，border（和outline）的底部会一直移动，导致设计不一致，因此必须应用丑陋的“补丁div”来保持border-bottom的外观，这并不是一个很好的代码示例。
看起来真的很棒。我过去常常使用CSS中的虚线边框来创建它，但这个更详细。非常感谢！
你好，
教程很棒。只有一件事…
如何为虚线创建阴影…
我尝试过所有方法，但无法使虚线具有阴影。
提前感谢…
很棒的技巧，我最近在一个电子商务网站上做了这个，缝合了价格标签，但是我最终使用了两个HTML元素，一个用于具有填充的背景颜色，然后内部元素具有虚线边框，这是一个更优雅的解决方案。谢谢
border-radius: 10px;
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
这在CSS2.1中不起作用。
它是如何工作的？
如果你在body中使用了百分比，就不能使用这种方法。
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
所以没有圆形缝线图标，想知道是否有人有解决方案。我也向Mozilla提交了关于此问题的错误报告。
我很惊讶没有人提到可怕的Firefox圆角渲染问题。如果这不是因为那个问题，我很乐意使用它。
我很好奇边框是如何进入红色框内的……但是用box shadow解决了……非常感谢……
旧版浏览器呢？如何确保border-radius在旧版浏览器中也能工作？有些人仍然使用旧版浏览器。网页设计师必须制作跨浏览器的网站。
FF中是否有任何解决虚线角渲染错误的方案？看起来是实线，非常奇怪:-/
我建议恢复使用图像或使用JS和图像的混合方式在按钮元素的角上应用虚线边框，不美观，但实用。另一种选择可能是尝试为现代浏览器使用可调整大小的SVG按钮。
还有其他更好的建议吗？
这比使用两个HTML元素来完成这项工作更有效率……
我很好奇边框是如何进入盒子里的，
现在明白了这个技巧。
简单但很酷的效果。设计都是关于想法的。你想到什么就可以把它转化成你的想法。
为什么字体粗细是加倍的？normal和bold？