Question

我想用＃34; x＆＃34;作为div上的重复底部边框。这可能吗？我是否必须将文本转换为图像并使用border-image属性？

Answer 1

您可以使用底部容器，使用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>

我还在考虑使用伪元素:after做这样的事情：

 .container:after {
    position:absolute;
    bottom:-12px;
    left:0;
    background-color:green;
    width:100%;
    overflow-x:hidden;
    content:"xxxxxxxxxxxxxxxxxxxxxxxxxxx";
 }
 <div class="container"></div>

Answer 2

尝试这样的事情，但你必须给我们一个代码示例和一个更明确的问题。

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

Answer 3

可以使用带有:after属性的CSS content伪属性。

请参阅此JSFiddle以获取示例：http://jsfiddle.net/matthewg0/0uhm08o0/

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

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

使用诸如“x”之类的文本作为div边框

3 个答案: