.bordered {
display: inline-block;
padding: 20px;
/* Fallback dashed border
- the 4px width here is overwritten with the border-image-width (if set)
- the border-image-width can be omitted below if it is the same as the 4px here
*/
border: dashed 4px #000;
/* Individual border image properties */
border-image-source: url("http://i.stack.imgur.com/wLdVc.png");
border-image-slice: 2;
border-image-repeat: round;
/* or use the shorthand border-image */
border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
}
/*The border image of this one creates wider gaps*/
.largeGaps {
border-image-source: url("http://i.stack.imgur.com/LKclP.png");
margin: 0 20px;
}
<div class="bordered">This is bordered!</div>
<div class="bordered largeGaps">This is bordered and has larger gaps!</div>
4 回答
Css渲染是特定于浏览器的,我不知道对它进行任何微调,你应该按照Ham的建议使用图像 . 参考:http://www.w3.org/TR/CSS2/box.html#border-style-properties
本机虚线边框属性值不提供对破折号本身的控制...因此请启用
border-image
属性!用border-image创建自己的边框
Compatibility :它提供great browser support(IE 11和所有现代浏览器) . 可以将普通边框设置为旧版浏览器的后备 .
让我们创造这些
这些边框将显示完全相同的跨浏览器!
步骤1 - 创建合适的图像
这个例子是15像素宽,15像素高,间隙目前是5px宽 . 这是一个透明的.png .
这是放大时在photoshop中的样子:
这就是扩展的样子:
控制间隙和行程长度
要创建更宽/更短的间隙或笔划,请加宽/缩短图像中的间隙或笔划 .
这是一个10px宽的图像:
正确缩放=
步骤2 - 创建CSS - 此示例需要4个基本步骤
默认值为1.也可以使用像素值,百分比值或另一个倍数(1x,2x,3x等)进行设置 . 这会覆盖任何
border-width
集 .在此示例中,图像的顶部,右侧,底部和左侧边框的厚度为2px,并且它们之外没有间隙,因此我们的切片值为2:
切片看起来像这样,从顶部,右侧,底部和左侧2个像素:
在这个例子中,我们希望模式在div周围均匀重复 . 所以我们选择:
Writing shorthand
上述属性可以单独设置,也可以使用border-image进行简写:
完整的例子
注意
border: dashed 4px #000
后备 . 不支持的浏览器将收到此边框 .除了
border-image
属性之外,还有一些其他方法可以创建虚线边框,控制笔划的长度和它们之间的距离 . 它们描述如下:方法1:使用SVG
我们可以使用
path
或polygon
元素并设置stroke-dasharray属性来创建虚线边框 . 该属性采用两个参数,其中一个定义破折号的大小,另一个确定它们之间的空间 .Pros:
SVG本质上是可缩放的图形,可以适应任何容器尺寸 .
即使涉及
border-radius
也能很好地工作 . 我们只需将path
替换为circle
,如this answer(或)将path
转换为圆圈 .Browser support for SVG非常好,可以使用VML for IE8-提供后备 .
Cons:
vector-effect='non-scaling-stroke'
(如第二个框中所示)来控制,但IE中对此属性的浏览器支持为nil .方法2:使用渐变
我们可以使用多个
linear-gradient
背景图像并适当地定位它们以创建虚线边框效果 . 这也可以通过repeating-linear-gradient
完成,但由于使用重复渐变而没有太大改进,因为我们需要每个渐变仅在一个方向上重复 .Pros:
即使容器的尺寸是动态的,也可以进行调整 .
不使用任何额外的伪元素,这意味着可以将它们放在一边用于任何其他潜在用途 .
Cons:
Browser support for linear gradients相对较低,如果你想支持IE 9-,这是不可取的 . 即使像CSS3 PIE这样的库也不支持在IE8中创建梯度模式 .
何时不能使用涉及
border-radius
因为背景不基于border-radius
曲线 . 他们被修剪了 .方法3:盒子阴影
我们可以使用伪元素创建一个小条形(以破折号的形状),然后创建它的多个
box-shadow
版本以创建边框,如下面的代码片段 .如果破折号是方形,那么单个伪元素就足够了,但如果它是一个矩形,我们需要一个伪元素用于顶部底部边框,另一个伪元素用于左边框边框 . 这是因为顶部边框上的破折号的高度和宽度将与左侧的破折号不同 .
Pros:
破折号的尺寸可通过改变伪元素的尺寸来控制 . 可以通过修改每个阴影之间的间距来控制间距 .
通过为每个框阴影添加不同的颜色,可以产生非常独特的效果 .
Cons:
由于我们必须手动设置短划线的尺寸和间距,因此当父框的尺寸是动态时,这种方法并不好 .
IE8及更低版本support box shadow . 但是,这可以通过使用CSS3 PIE等库来克服 .
可以与
border-radius
一起使用,但是定位它们会非常棘手,因为必须在圆上找到点(甚至可能是transform
) .简短的一句:不,不是 . 您将不得不使用图像 .