cari

Rumah  >  Artikel  >  hujung hadapan web  >  html水平线hr颜色怎么写

html水平线hr颜色怎么写

青灯夜游
青灯夜游asal
2021-03-02 17:16:136595semak imbas

在html中，可以使用border-color属性来给水平线hr设置颜色，只需要给hr标签添加“border-color:颜色值;”样式即可。border-color属性用于给元素设置边框颜色，可以在一个声明中设置一个元素的四个边框颜色，即此属性可以有一到四个值。

html水平线hr颜色怎么写

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

f32b48428a809b51f04d3228cdf461fa 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。

f32b48428a809b51f04d3228cdf461fa 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。

默认的hr标签样式：

1.png

就是一条黑线，一点都不美观，可以使用css的border-color属性来设置颜色。

<hr style="border-color: red"/>

效果图：

2.png

border-color属性介绍

border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。

属性值：

  • color    指定背景颜色。

  • transparent    指定边框的颜色应该是透明的。这是默认    

CSS3支持的颜色表示方法

  • 用颜色英文名称表示。英文名称代表一种颜色，但表示很有限且不易记忆和查询。
  • 用十六进制的颜色表示。色光三原色原理，可以查表。
  • 用 rgb (r, g, b) 表示。色光三原色原理，红色 + 绿色 + 蓝色。
  • 用 hsl (Hue, Saturation, Lightness) 表示。色调 + 饱和度 + 亮度。
  • 用 rgba (r, g, b, a) 表示。色光三原色原理，红色、绿色、蓝色 + 透明度。a ∈ [0, 1]，0代表完全透明。
  • 用 hsla (Hue, Saturation, Lightness, alpha) 表示。色调、饱和度、亮度 + 透明度。alpha ∈ [0, 1]，0代表完全透明。

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" ;charset="utf-8">
    <title>CSS颜色表示</title>
    <style type="text/css">
      div>div{
        width: 400px;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      for (var i = 0; i < 300; i++) {
        document.write("CSS颜色表示");
      }
    </script>
    <div style="position:absolute;top:0px">
      <div style="background-color:gray;">
        background-color:gray
      </div>
      <div style="background-color:#ff4314;">
        background-color:#888
      </div>
      <div style="background-color:#ffff00;">
        background-color:#ffff00
      </div>
      <div style="background-color:rgb(0, 255, 255);">
        background-color:rgb(0, 255, 255)
      </div>
      <div style="background-color:hsl(120, 100%, 50%);">
        background-color:hsl(120, 100%, 50%)
      </div>
      <div style="background-color:rgba(0, 255, 255, 0.5);">
        background-color:rgba(0, 255, 255, 0.5)
      </div>
      <div style="background-color:hsla(120, 100%, 50%, 0.5);">
        background-color:hsla(120, 100%, 50%, 0.5)
      </div>
    </div>
  </body>
</html>

网页展示

在这里插入图片描述

说明：之所以在后面加文字，是为了验证透明度。

（学习视频分享：css视频教程、web前端）

Atas ialah kandungan terperinci html水平线hr颜色怎么写. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 html border
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html怎么进行页面跳转（重定向）Artikel seterusnya：在html中float不属于盒子属性吗

Artikel berkaitan

Lihat lagi