HTML分隔線如何美化？

做HTML頁面開發時，在幾段文字之間，或幾塊內容之間，經常會使用分隔線去做分隔，以讓頁面顯示更加有條理。分隔線我們基本上都是用hr標簽去生成，怎么去美化這個分隔線？下面一起看下。

操作方法

01
先看下我們的html代碼，二個p段落，中間用hr作分隔，代碼如圖。
02
頁面運行后，可以看到，默認的hr分隔線就是一條黑色的線條，算不上美觀。
03
通過添加一些樣式，我們可以設置hr分隔線的大小和顏色，主要是設置它的border樣式。代碼如下，
.content hr{
border: 2px solid #cc0000
}
04
刷新頁面，可以看到效果如圖
05
我們還可以把分隔線默認的實體線改成點劃線，只需要把border樣式改成如下：border: 1px dashed #cc0000;
效果如圖。
06
另外如果你需要很復雜的分隔線，就需要用背景圖來實現了，我們可以為hr設置背景圖，但要注意的是，如果是用背景圖，我們一定要設置hr的高度，和把border設置為none，代碼如圖
07
效果如圖，我們的分隔線雖然很簡單，但也能設置很多樣式，能做很好的美化效果。
End