带有自定义划线长度和间距的边框

Question

我怎样才能获得这种边界？短划线之间的20px短划线和20px间距。没有自定义背景文件甚至可能吗？我能得到的最接近的是：

   .element {
      width: 600px;
      height: 300px;
      border-radius: 45px;
      background-image: linear-gradient(to right, red 50%, white 50%);
      background-position: top;
      background-size: 10px 1px;
      background-repeat: repeat-x;
    }

 
    
    <div class="element">
    TEXT TEXT
    </div>

直播：https://jsfiddle.net/roo5rbb3/

Answer 1

试试这个：

border-style: dashed;

所以你的完整CSS将如下所示：

.element {
    width: 600px;
    height: 300px;
    border-radius: 45px;
    background-image: linear-gradient(to right, red 50%, white 50%);
    background-position: top;
    background-size: 10px 1px;
    background-repeat: repeat-x;
    border-color: red;
    border-width: 2px;
    border-style: dashed;
}