具有自定义虚线长度和间距的边框

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/

- KATq

---

这个答案效果最佳。https://dev59.com/v2025IYBdhLWcg3wCxRN#40054141 - Jatto_abdul

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;
}

- viks