CSS中的拼接边框效果答案

【问题标题】：stitched border effect in CSSCSS中的拼接边框效果
【发布时间】：2016-06-14 06:55:49
【问题描述】：

目前我的边框是这样的：

使用的 CSS 是：

.widget > h5 {
    border: 3px double #cccccc;
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 30px;
    padding-bottom: 12px;
    padding-top: 12px;
    text-align: center;
    text-transform: uppercase;
}

我的问题是如何创建类似这样的拼接效果：

.stitched_element {
border: 2px dashed  #ffffff;
box-shadow: 0 0 0 8px #ff0030;
}

【问题讨论】：

底部有三角形还是没有三角形？
如果可能的话有和没有:)
2 个 div，都带有 border: dashed 和它们之间的一些填充：jsfiddle.net/e9ytdyya
试试这个.dashed {border-style: dashed;}
试试填充：jsfiddle.net/EdmondWang/659Lxo90

标签： jquery css photoshop

【解决方案1】：

如果您不需要三角形，请使用Edmond Wang's solution（在任何地方都可以使用）。

但是如果您确实需要它，您必须使用canvas 或svg 来创建它，后者更复杂且may not work on every browser。

我仍然使用画布制作了fiddle where you can see the result：

<canvas width="500"></canvas>

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

// Then use ctx to draw what you need e.g :
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 100, 100); 
// Draws a black rectangle at (X,Y)=(0,0) and width & height = 100px

【讨论】：