首页 文章

控制虚线边框行程长度和笔画之间的距离

提问于
浏览
88

是否可以控制CSS中虚线边框笔划之间的长度和距离?

以下示例在浏览器之间显示不同:

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}
<div>I have a dashed border!</div>

差异很大:IE 11 / Firefox / Chrome

IE 11 border

Firefox Border

Chrome border

有没有什么方法可以更好地控制虚线边框的外观?

4 回答

  • 65

    Css渲染是特定于浏览器的,我不知道对它进行任何微调,你应该按照Ham的建议使用图像 . 参考:http://www.w3.org/TR/CSS2/box.html#border-style-properties

  • 16

    本机虚线边框属性值不提供对破折号本身的控制...因此请启用 border-image 属性!

    用border-image创建自己的边框

    Compatibility :它提供great browser support(IE 11和所有现代浏览器) . 可以将普通边框设置为旧版浏览器的后备 .

    让我们创造这些

    这些边框将显示完全相同的跨浏览器!

    Goal example

    Goal example with wider gaps

    步骤1 - 创建合适的图像

    这个例子是15像素宽,15像素高,间隙目前是5px宽 . 这是一个透明的.png .

    这是放大时在photoshop中的样子:

    Example Border Image Background Blown Up

    这就是扩展的样子:

    Example Border Image Background Actual Size

    控制间隙和行程长度

    要创建更宽/更短的间隙或笔划,请加宽/缩短图像中的间隙或笔划 .

    这是一个10px宽的图像:

    Larger gaps
    正确缩放=
    Larger gaps to scale

    步骤2 - 创建CSS - 此示例需要4个基本步骤

    border-image-source:url("http://i.stack.imgur.com/wLdVc.png");
    
    border-image-width: 1;
    

    默认值为1.也可以使用像素值,百分比值或另一个倍数(1x,2x,3x等)进行设置 . 这会覆盖任何 border-width 集 .

    在此示例中,图像的顶部,右侧,底部和左侧边框的厚度为2px,并且它们之外没有间隙,因此我们的切片值为2:

    border-image-slice: 2;
    

    切片看起来像这样,从顶部,右侧,底部和左侧2个像素:

    Slices example

    在这个例子中,我们希望模式在div周围均匀重复 . 所以我们选择:

    border-image-repeat: round;
    

    Writing shorthand

    上述属性可以单独设置,也可以使用border-image进行简写:

    border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
    

    完整的例子

    注意 border: dashed 4px #000 后备 . 不支持的浏览器将收到此边框 .

    .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>
    
  • 19

    除了 border-image 属性之外,还有一些其他方法可以创建虚线边框,控制笔划的长度和它们之间的距离 . 它们描述如下:

    方法1:使用SVG

    我们可以使用 pathpolygon 元素并设置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 .
    .dashed-vector {
      position: relative;
      height: 100px;
      width: 300px;
    }
    svg {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      width: 100%;
    }
    path{
      fill: none;
      stroke: blue;
      stroke-width: 5;
      stroke-dasharray: 10, 10;
    }
    span {
      position: absolute;
      top: 0px;
      left: 0px;
      padding: 10px;
    }
    
    
    /* just for demo */
    
    div{
      margin-bottom: 10px;
      transition: all 1s;
    }
    div:hover{
      height: 100px;
      width: 400px;
    }
    
    <div class='dashed-vector'>
      <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
        <path d='M0,0 300,0 300,100 0,100z' />
      </svg>
      <span>Some content</span>
    </div>
    
    <div class='dashed-vector'>
      <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
        <path d='M0,0 300,0 300,100 0,100z' vector-effect='non-scaling-stroke'/>
      </svg>
      <span>Some content</span>
    </div>
    

    方法2:使用渐变

    我们可以使用多个 linear-gradient 背景图像并适当地定位它们以创建虚线边框效果 . 这也可以通过 repeating-linear-gradient 完成,但由于使用重复渐变而没有太大改进,因为我们需要每个渐变仅在一个方向上重复 .

    .dashed-gradient{
      height: 100px;
      width: 200px;
      padding: 10px;
      background-image: linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to right, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%), linear-gradient(to bottom, blue 50%, transparent 50%);
      background-position: left top, left bottom, left top, right top;
      background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
      background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
    }
    
    .dashed-repeating-gradient {
      height: 100px;
      width: 200px;
      padding: 10px;
      background-image: repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, blue 0%, blue 50%, transparent 50%, transparent 100%);
      background-position: left top, left bottom, left top, right top;
      background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
      background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
    }
    
    /* just for demo */
    
    div {
      margin: 10px;
      transition: all 1s;
    }
    div:hover {
      height: 150px;
      width: 300px;
    }
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
    <div class='dashed-gradient'>Some content</div>
    <div class='dashed-repeating-gradient'>Some content</div>
    

    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 ) .

    .dashed-box-shadow{
      position: relative;
      height: 120px;
      width: 120px;
      padding: 10px;
    }
    .dashed-box-shadow:before{ /* for border top and bottom */
      position: absolute;
      content: '';
      top: 0px;
      left: 0px;
      height: 3px; /* height of the border top and bottom */
      width: 10px; /* width of the border top and bottom */
      background: blue; /* border color */
      box-shadow: 20px 0px 0px blue, 40px 0px 0px blue, 60px 0px 0px blue, 80px 0px 0px blue, 100px 0px 0px blue, /* top border */
        0px 110px 0px blue, 20px 110px 0px blue, 40px 110px 0px blue, 60px 110px 0px blue, 80px 110px 0px blue, 100px 110px 0px blue; /* bottom border */
    }
    .dashed-box-shadow:after{ /* for border left and right */
      position: absolute;
      content: '';
      top: 0px;
      left: 0px;
      height: 10px; /* height of the border left and right */
      width: 3px; /* width of the border left and right */
      background: blue; /* border color */
      box-shadow: 0px 20px 0px blue, 0px 40px 0px blue, 0px 60px 0px blue, 0px 80px 0px blue, 0px 100px 0px blue, /* left border */
        110px 0px 0px blue, 110px 20px 0px blue, 110px 40px 0px blue, 110px 60px 0px blue, 110px 80px 0px blue, 110px 100px 0px blue; /* right border */
    }
    
    <div class='dashed-box-shadow'>Some content</div>
    
  • 112

    简短的一句:不,不是 . 您将不得不使用图像 .

相关问题