Maison  >  Article  >  interface Web  >  Comment définir le style des RH en CSS ? css


balise plusieurs styles (graphiques et texte)

Comment définir le style des RH en CSS ? css
balise plusieurs styles (graphiques et texte)

青灯夜游
青灯夜游original
2018-09-21 17:20:0647204parcourir

在对html网页进行美化的时候,肯定少不了要用的hr标签进行修饰页面,但默认的hr标签样式对页面的修饰起不到什么好的作用,有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作。那么如何在css中给hr标签设置样式呢?本章就给大家介绍css设置hr标签的几种样式。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

一、hr的是什么意思

简单来说,hr就是html页面上的一条水平分隔线(horizontal rule),它可以在视觉上将文档分隔成各个部分。需要通过


标签在 HTML 页面中创建。

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

Comment définir le style des RH en CSS ? css <hr> balise plusieurs styles (graphiques et texte)

就是一条黑线,一点都不美观,更不用说用


来美观页面了,这就需要用css来设置hr的样式了。

二、css设置hr样式

我们怎样用css设置hr样式?其实很简单,可以通过css border属性css background-image属性来设置hr的样式:

1.css设置hr的粗细(加粗)与颜色

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

Comment définir le style des RH en CSS ? css <hr> balise plusieurs styles (graphiques et texte)

2.css设置hr的虚线样式(颜色为蓝色)

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

Comment définir le style des RH en CSS ? css <hr> balise plusieurs styles (graphiques et texte)

3.css设置hr的双线样式

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

Comment définir le style des RH en CSS ? css <hr> balise plusieurs styles (graphiques et texte)

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 凹槽-->

Comment définir le style des RH en CSS ? css <hr> balise plusieurs styles (graphiques et texte)

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));
}

Comment définir le style des RH en CSS ? css <hr> balise plusieurs styles (graphiques et texte)

以上只是举了几个简单的例子,hr标签的样式还可以通过CSS来实现很多。大家可以动手试试!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn