Question

我创建了我的CSS代码非常好用我希望在div的div中为我的内容提供相同的线条但是我只希望所有四个角落之间没有任何东西在这里我到目前为止所拥有的在这一点上，我对如何解决这个问题感到困惑

这就是我想要做的事情

＆＃13;

.Line
{
    border-bottom: 1px solid #b2b2b2;
    border-left: 1px solid #b2b2b2; 
    padding-top: 5px;
    padding-bottom: 5px;
    width: 65%;
    position: relative;
    border-bottom-left-radius: 10px;
    position: relative;
    /* left: -15px;
    top: -120px; */
    height: 100px;
}

.Line:before, .Line:after
{
    content: "";
    width: 8px;
    height: 8px;
    /*background: #b2b2b2;*/
    border: 2px solid #b2b2b2;
    border-radius: 5px;
    position: absolute;
    top: -3px;
}

.Line:before
{
    left: -6px;
    top: -10px;
}

.Line:after
{
    right: -10px;
    top: 105px !important;
}

.LineFullWidth
{
    border-bottom: 1px solid #b2b2b2;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 95%;
    position: relative;
}

.LineFullWidth:before, .LineFullWidth:after
{
    content: "";
    width: 8px;
    height: 8px;
    background: #b2b2b2;
    border-radius: 5px;
    position: absolute;
    top: -3px;
}

.LineFullWidth:before
{
    left: -6px;
    top: 6px;
}

.LineFullWidth:after
{
    right: -7px;
    top: 6px !important;
}

＆＃13;

<body>
<div class="Line">
<h2>CONTENT</h2>
</div>
</body>

＆＃13;

Answer 1

您可以使用伪并添加它们框阴影来绘制多个边框。

背景可能隐藏部分线条。

使用普通背景色可以正常工作。

演示使用vw单位仅用于演示目的，您可以使用像素单位或其他任何内容。

＆＃13;

<div>
<h2>CONTENT</h2>
</div>

＆＃13;

<?php $the_query = new WP_Query(array( 
    'post_type' => 'page',
    'posts_per_page' => -1,
    'post_parent' => $post->ID));

    $count_posts = wp_count_posts('page');
    $published_posts = $count_posts->publish;

    if($published_posts % 2 == 0) {
        while ( $the_query->have_posts() ) :
            $the_query->the_post(); ?>
            ....some markup 
        <?php endwhile;

    } else {
        while ( $the_query->have_posts() ) :
            $the_query->the_post(); ?>
            ....some different markup
        <?php endwhile;
    }
wp_reset_query(); ?>

＆＃13;

SVG肯定会做得更好;）

如何在CSS边框的直线部分留下空隙

1 个答案: