[分享]css不显示右边框线

pre { background-color: #f5f5f5; font-size: 16px; padding: 10px; } p { font-size: 18px; line-height: 1.5; margin: 20px 0; } .box { border: 1px solid #000; border-right: none; /* 将右边框线去掉 */ width: 200px; height: 100px; margin: 20px auto; }

在开发中，我们可能会想要为一个元素设置边框，以便突出它在页面中的位置，css中设置边框的方式很简单，例如：我们想要为一个元素设置一个黑色的实线边框，可以这样写：

 .example {
        border: 1px solid #000;
    } 

然而，在某些情况下，我们可能不想要设置一个完整的边框，我们只需要左边和上面的实线边框，不需要右边和下面的。我们可以使用border-top、border-left、border-bottom、border-right来手动控制每个边框的样式，例如：

 .example {
        border-top: 1px solid #000;
        border-left: 1px solid #000;
    } 

这样，我们的 .example 元素只有上边框和左边框。

但是！有一点需要注意的是，当我们只设置左边框和上边框时，右边框和下边框会默认设置为none，并且它们将不会显示，例如：

因此，如果希望右边框线仍然出现在元素中，我们需要手动将其设置为实线，例如：

 .box {
        border: 1px solid #000;
        border-right: none; /* 将右边框线去掉 */
    } 

这样我们的.box元素就只有上边框和左边框，右边框线也会显示出来。

总而言之，在css中，我们可以使用border-top、border-left、border-bottom、border-right来手动设置每个边框的样式，但是需要注意的是，当只设置左边框和上边框时，右边框和下边框会默认设置为none，并且不会显示。