用HR標籤在網頁上製作有趣的線條
如果您需要為您的網站添加水平分隔線樣式的線條，您可以選擇一些選項。 您可以將這些行的實際圖像文件添加到您的頁面，但這需要您的瀏覽器檢索並加載這些文件，這可能會對網站性能產生負面影響。
您可以使用CSS邊框屬性添加邊框 ，作為元素頂部或底部的線條，有效地創建分隔線。
最後，您可以使用橫向規則的HTML元素 -
橫向規則元素
如果你曾經在網頁上放過一個元素，你可能會發現這些行顯示的默認方式並不理想。 這意味著您需要轉向CSS來調整這些元素的外觀以符合您希望網站的外觀。
基本的HR標籤以瀏覽器想要顯示的方式顯示。 現代瀏覽器通常顯示寬度為100％，高度為2px的未標註HR標籤，以及黑色的3D邊框以創建該線。
下面是一個標準HR元素的例子，或者您可以在這張圖片中看到現代瀏覽器中未被塑造的HR的外觀。
寬度和高度在瀏覽器中保持一致
在Web瀏覽器中唯一一致的樣式是寬度和样式。 這些定義了線路的大小。 如果您未定義寬度和高度，則默認寬度為100％，默認高度為2px。
在這個例子中，寬度是父元素的50％（注意下面的這些例子都包含內聯樣式，在生產環境中，這些樣式實際上會寫在外部樣式表中，以便在整個頁面中進行管理）：
風格=“寬度：50％;”>
在這個例子中，高度是2em：
風格=“高度：2em的;”>
改變邊界可能具有挑戰性
在現代瀏覽器中，瀏覽器通過調整邊框來構建線條。 因此，如果您使用style屬性移除邊框，該行將消失在頁面上。 正如你所看到的（當然，你不會看到任何東西，因為在這個例子中線條是不可見的）：
style =“border：none;”>
調整邊框的大小，顏色和样式會使線條看起來不同，並且在所有現代瀏覽器中都具有相同的效果。 例如，在這個演示中，邊框是紅色，虛線和1px寬：
style =“border：1px dashed＃000;”>
但是，如果您更改邊框和高度，則在非常過時的瀏覽器中，這些樣式與現代瀏覽器中的樣式略有不同。 正如你在這個例子中看到的那樣，如果你在IE7和IE7以下瀏覽它（一個瀏覽器已經過時並且不再被微軟支持），那麼就會出現一條斜線，不會在其他瀏覽器中顯示（包括IE8及更高版本） ：
style =“height：1.5em; width：25em; border：1px solid＃000;”>
那些復古的瀏覽器在今天的網頁設計中確實不太受關注，因為它們在很大程度上已經被更現代的選擇所取代。
用背景圖像製作裝飾線
您可以為您的HR定義背景圖像，以使其看起來完全符合您的需求，但仍可在語義上顯示在您的標記中，而不是顏色。
在這個例子中，我們使用了三條波浪線的圖像。 通過將其設置為不重複的背景圖像 ，它會在內容上創建一個與您在書中看到的幾乎相同的內容：
style =“height：20px; background：#fff url（aa010307.gif）no-repeat scroll center; border：none;”>
轉化HR元素
使用CSS3，你也可以讓你的線條更有趣。 HR元素傳統上是一條水平線 ，但通過CSS轉換屬性，您可以改變它們的外觀。 HR元素最喜歡的轉換是改變旋轉。
您可以旋轉您的HR元素，使其略微傾斜：
hr {
-moz-transform：rotate（10deg）;
-webkit-transform：rotate（10deg）;
-o-transform：rotate（10deg）;
-ms-transform：rotate（10deg）;
轉換：旋轉（10deg）;
}
或者你可以旋轉它，使它完全垂直：
hr {
-moz-transform：旋轉（90deg）;
-webkit-transform：旋轉（90deg）;
-o-transform：旋轉（90deg）;
-ms-transform：rotate（90deg）;
轉換：旋轉（90deg）;
}
請記住，這會根據文檔中當前位置來旋轉HR，因此您可能需要調整定位以將其放置在您想要的位置。 不建議使用它來為設計添加垂直線條，但它是獲得有趣效果的一種方式。
另一種方式獲得您的網頁上的線條
有些人不使用人力資源元素，而是依靠其他元素的邊界。 但是有時候HR比嘗試設置邊界更方便，更容易使用。 一些瀏覽器的盒子模型問題可以使設置邊界更加棘手。