CSS自定义边框使用内容属性

Question

我希望使用CSS content属性创建类似下图的自定义边框：

这可能吗？

下面的代码段我要去的地方

.box
{
  height: 100px;
  width: 100px;
  padding: 15px;
}

.customBorder
{
  content: 'X';
  border: 10px dashed red;
}

<div class="customBorder box">
  Custom Border Test
</div>

我也对jQuery的答案持开放态度。

Answer 1

您无法在边框中使用content。解决方案是使用border-image创建自定义边框

＆＃13;

＆＃13;

#borderimg1 { 
    border: 30px solid transparent;
    padding: 15px;
    -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;
}

＆＃13;

<p id="borderimg1"> create the border.</p>

＆＃13;

＆＃13;

＆＃13;