CSS - Comment embellir hr

2022-09-01 16:12:27  jeudi  1754 mots  

En termes simples, hr est une règle horizontale sur une page html qui sépare visuellement un document en sections. Il doit être créé dans une page HTML via la balise <hr>.

1. Que signifie hr ?

那么我们看看默认的hr标签样式：

就是一条黑线，一点都不美观，更不用说用<hr>来美观页面了，这就需要用css来设置hr的样式了。

二、css设置hr样式

我们怎样用css设置hr样式？其实很简单，可以通过css border属性和css background-image属性来设置hr的样式：

1.css设置hr的粗细（加粗）与颜色

<hr style="border: 5px solid red;"/><!--修改的样式-->
<br />
<hr /><!--默认的样式-->复制代码

2.css设置hr的虚线样式（颜色为蓝色）

<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>复制代码

3.css设置hr的双线样式

<hr style="height:3px;border:none;border-top:3px double red;"/>复制代码

4. css设置hr的3D立体样式

<hr style=" height:5px;border:none;border-top:5px ridge green;"/><!--3D 垄状-->
<hr style=" height:10px;border:none;border-top:10px groove skyblue;"/><!--3D 凹槽-->复制代码

5.css设置hr的渐变样式

html代码：

<hr class="style-one"/>
<br/>
<hr class="style-two"/>复制代码

css代码：

hr.style-one {/*透明渐变水平线*/
 width:80%;
 margin:0 auto;
 border: 0;
 height: 4px;
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.style-two{/*渐变*/
 width:80%;
 margin:0 auto;
 border: 0;
 height: 4px;
 background: #333;
 background-image: linear-gradient(to right, red, #333, rgb(9, 206, 91));
}复制代码

以上只是举了几个简单的例子，hr标签的样式还可以通过CSS来实现很多。

Génial ! ()
CSS hr

Précédent:Tutoriel CSS - Commencez avec HTML + CSS

Suivant:Comment créer Anchor dans l’éditeur

Relation
Commentaire