css上下边框不一样粗

在网页设计中，我们经常会遇到需要上下边框不一样粗的情况。以前我们可能只能用图片或者JavaScript来实现，但现在有了CSS，这个问题就变得非常简单了。
首先，我们来看一个例子：

<p class="double-border">这里有一个双边框</p> 

现在我们想要这个段落有一个双边框，上下边框比左右边框粗一些。我们可以这样写CSS：

.double-border {
  border: 3px solid black;
  border-top-width: 6px;
  border-bottom-width: 6px;
} 

这段CSS中，我们首先定义了一个3像素宽的黑色实线边框。然后，我们通过border-top-width和border-bottom-width属性，单独设置了上下边框的宽度为6像素。这样，我们就实现了上下边框比左右边框粗的效果。
另外，如果我们还想让上下边框的颜色和左右边框不同，也很容易实现。我们可以这样写CSS：

.double-border {
  border: 3px solid black;
  border-top: 6px solid red;
  border-bottom: 6px solid blue;
} 

这段CSS中，我们首先定义了一个3像素宽的黑色实线边框。然后，我们通过border-top和border-bottom属性，单独设置了上下边框的颜色和宽度。上边框为6像素宽的红色边框，下边框为6像素宽的蓝色边框。这样，我们就实现了上下边框颜色和宽度不同的效果。
总之，通过CSS的border属性和各种子属性，我们可以非常方便地实现上下边框不一样粗的效果，而无需使用图片或者JavaScript。学会使用CSS的border属性，可以让我们的网页设计更加灵活实用。