Css 使用文本，例如；x"；作为部门边界

我想使用字母“x”作为div的重复底边。这可能吗？我是否必须将文本转换为图像并使用border image属性？

您可以使用底部容器，使用javascript填充

x

字符。类似这样的方法会奏效：

.container {
   position:relative;
   width:100%;
   height:100%;
   padding:16px;
   background-color:yellow;
}
.bottom {
   position:absolute;
   bottom:0;
   overflow-x: hidden;
   width:100%;
   background-color:red;
 }

 $(document).ready(function() {
     var width = $('.bottom').width();
     var chars = Math.round(width / 2); /* you need to tweek this */
     var characters = new Array(chars).join('x');
     $('.bottom').text(characters);
 });


 <div class="container">
   <div class="bottom"></div>
 </div>

---

尝试类似的方法，但您必须给我们一个代码示例和一个更明确的问题

<div style="border-bottom:<?php echo $x;?>px;">123</div>

---

这可以使用CSS
：after
伪属性和
content
属性

有关示例，请参见此JSFIDLE：

它使用以下CSS来实现您仅使用CSS（无javascript）寻找的结果

<div style="border-bottom:<?php echo $x;?>px;">123</div>

.x-separator:after {
    content:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
    font-size:10px;
    display:block;
    overflow:hidden;
}