CSS中可以使用border屬性來給元素設置邊框,但是如果我們想讓邊框上下都有,該怎么辦呢?下面就介紹一種方法。
/* 在外層包裹一個容器div */ <div id="container"> <p>這是一個有上下邊框的段落。</p> </div> /* 設置容器的樣式 */ #container{ border-top: 1px solid black; /* 頂部邊框 */ border-bottom: 1px solid black; /* 底部邊框 */ padding: 10px; /* 設定內邊距 */ } /* 設置段落的樣式 */ p{ margin: 0; /* 去掉上下外邊距 */ }
上面的代碼中,我們在外層包裹了一個ID為container的div元素,然后設置了它的頂部和底部邊框為1像素的實線,并設定了內邊距為10像素。接著,我們將段落的上下外邊距去掉,這樣它就會緊貼著容器的邊框了。
通過這種方法,我們可以輕松地實現上下有邊框的效果,而無需使用其他諸如偽元素等繁瑣的操作。