欢迎各位兄弟 发布技术文章

这里的技术是共享的

css border 虚线 如何调整间距 距离

css 样式中怎么设置边框是圆点虚线之间的距离

凌_494 | 浏览 2746 次
发布于2014-11-03 14:54最佳答案
 
这个没法设置,想设置圆点之间的距离的话要么就用ps去作图,然后使用background属性,使虚线位于下方.如果你去纠结圆点虚线直接的距离的话,直接border:1px dotted #ccc;搞定

来自  https://segmentfault.com/q/1010000002442556

CSS 的 border: 1px dashed 样式太难看了,虚线非常的宽,dotted 也是一样,间距太窄。
 
 
 

3个回答

0

Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.

——MDN

囧,看来没好办法。不过你可以用图片作边框用。

0

没有办法。

但SVG线条是可以设置间距的。

path {
    stroke-dasharray: 4;
    stroke-dashoffset: 22;
}
0

如果一定要这样,使用一下背景图片也是个选择,切一小片repeat就好了,而且兼容性很好。但如果是竖边框的话,就稍微麻烦些。

来自  https://segmentfault.com/q/1010000002442556


怎么设置 CSS border 虚线之间间隔(密度)

怎么设置 CSS border 虚线之间间隔(密度)

标签:CSS     更新时间:2016-07-25    评分13.5    返回首页

CSS border-style属性中,dashed 和 dotted 形成虚框间距是无法改变的,但是 CSS3 提供了 border-image 解决了设置 border 虚线间隔的问题。

1、CSS3 border-image 属性基础语法

border-image:border-image-source [border-image-width]{1,4} [border-image-repeat]{0,2}

可以看出 border-image 的参数涉及三个方面:图片,剪裁位置,重复性。

属性描述可能的值
border-image-source设置背景图片可以使用绝对或相对URL地址指定边框的背景图片
border-image-width设置边框图片的宽度。可以是具体的像素(px),也可以是百分比(%)
   
border-image-repeat设置背景图片的铺放方式平铺(repeated)、铺满(rounded)或拉伸(stretched)

例如: border-image:url(border.png) 27 repeat; ,指的就是图片(url(border.png)),剪裁位置(27),重复方式(repeat)。

2、border-image 设置 CSS border 虚线间隔

在正式绘制边框前,我们先认识一下CSS3 border-image-slice 属性,它可以将border-image-source获取的边框背景图片切割为9份。语法如下:

border-image:border-image-source slice-width{1,4}

slice-width的值可以是具体像素,也可以是百分比。切割后的图片块分别是

border-top-left-imageborder-top-imageborder-top-right-image
border-left-image border-right-image
border-bottom-left-imageborder-bottom-imageborder-bottom-right-image

其中,border-top-image和border-bottom-image区域受到水平方向效果影响,如果是repeat则此区域图片会水平重复,如果是round则会水平平铺,责任stretch则被水平拉升。而我们设置虚线,则选择repeat/round都可以。

3、border-image 绘制 CSS border 虚线边框步骤

使用PS绘制边框图片如100*100px的矩形边框图片,切割为九宫格则每格像素为33px。

实例代码:

<style>
.border_dashed{
  width:400px;
  height:100px;
border:1em double;
  border-image:url(dashed.png) 33 repeat;
}
</style>
<div class="border_dashed">test</div>

效果演示:

test

注意: 只有border-top-image、border-bottom-image、border-leftp-image和border-right-image四个区块会受到repeat、round和stretch属性值影响。因此,可以通过控制这四个图片区域线段长度,控制border虚线之间间隔。

来自  http://www.tuicool.com/articles/viymqqa


唯物品评历史

关注"唯物品评历史",跟着泪痕春雨先生,读懂历史,看彻人生

打开隐藏二维码