HTML中的`
`標簽常常被用來區分文本的段落,但是默認的橫線樣式可能不太符合我們的需求。本文將教你如何使用CSS來自定義`
`的樣式。 首先,在HTML中插入一個`
`標簽,它將自動創建一條橫線。我們給這個橫線添加一個類名,比如`my-hr`: ```html
`標簽設置顯示類型為塊級元素,這樣才能將樣式應用到橫線上。這可以通過`display: block`來實現。 最終的代碼與效果如下: ```HTML
標簽的樣式](https://upload-images.jianshu.io/upload_images/23278989-a198c4aeea377e4f.png)
`標簽常常被用來區分文本的段落,但是默認的橫線樣式可能不太符合我們的需求。本文將教你如何使用CSS來自定義`
`的樣式。 首先,在HTML中插入一個`
`標簽,它將自動創建一條橫線。我們給這個橫線添加一個類名,比如`my-hr`: ```html
這是一段文字
這是另一段文字
``` 然后在CSS中定義`.my-hr`的樣式。我們可以用`border`屬性來創建邊框樣式的線條: ```CSS .my-hr { border: none; border-top: 1px solid #000; } ``` 這段代碼將移除自帶的橫線,并用一像素的黑色,實線邊框來創建一條緊湊的橫線。 如果想要更加自由地定義橫線的樣式,可以繼續使用CSS的其他屬性,如`height`、`width`、`margin`和`padding`等。 需要注意的是,我們需要為自定義的``標簽設置顯示類型為塊級元素,這樣才能將樣式應用到橫線上。這可以通過`display: block`來實現。 最終的代碼與效果如下: ```HTML
這是一段文字
這是另一段文字
``` ```CSS .my-hr { display: block; border: none; border-top: 1px solid #000; height: 5px; width: 100%; margin: 10px 0; padding: 0; } ``` ![自定義標簽的樣式](https://upload-images.jianshu.io/upload_images/23278989-a198c4aeea377e4f.png)