CSS设置hr样式

最新推荐文章于 2022-08-12 14:59:44 发布
最新推荐文章于 2022-08-12 14:59:44 发布
阅读量1.1w 收藏 2
点赞数
分类专栏： css 文章标签： css hr
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cengjingcanghai123/article/details/22197587
版权 
<div style='height:1px;background-color:#3399FF;line-height:1px;clear:both;display:block;overflow:hidden'> </div>
hr在ie和ff下表现形式可能有所出入, 可以用 div来代替
-----------------------------------
用hr的话, 只能是  <hr size=1 style='color:#3399FF' />
-----------------------------------
<style>
hr{line-height:1px;clear:both;display:block;overflow:hidden'> </div>
hr在ie和ff下表现形式可能有所出入, 可以用 div来代替
-----------------------------------
用hr的话, 只能是  <hr size=1 style='color:#3399FF' />
-----------------------------------
<style>
hr{

 

color:#3399FF;
height:1px;
border:0px;
border-top:1px solid #3399FF;
margin:0px;
padding:0px;
overflow:hidden;
}
</style>
<hr size=1 />
 

 

延伸阅读
 

 

▶ Walkthrough007

                

        

        

    




    

      

        

            

              
                
                  曾经沧海难为水-除却巫山不是云
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
css中如何设置hr的样式？css <hr>标签多种样式（图文）

				
			

			

				

					lin123_00的博客
				

				

					05-11
					
					1万+
					
				

			

		

		

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

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

一、hr的是什么意思

简单来说，hr就是html页面上的一条水平分隔

			
		

	



                

              
                



	

		

			

				
					
设置＜hr＞标签的样式

				
			

			

				

					qq_61541602的博客
				

				

					04-14
					
					1227
					
				

			

		

		

			
				
在我们的实际开发中，可能有的时候是避免不了需要用到水平线。但是我们发现它本身的样式又 不太美观，然而当我们直接对它进行设置样式的时候发现无法进行设置，在这个时候我们可以用以下的方法来设置：



原始方法设置:

html


<div class="hr">
   <h1>标题</h1>
   <hr>
</div>

css




body{
   background: Gainsboro;
}
hr{
  color: red;
}

.

			
		

	



                


  
              

                


	

		

			

				
					
css hr样式

				
			

			

				

					TrustNature
				

				

					08-05
					
					179
					
				

			

		

		

			
				
1、效果

2、样式

<style type="text/css">

.hr0{ height:1px;border:none;border-top:1px dashed #0066CC;}
.hr1 {height:1px;border:none;border-top:2px solid #c9c9c9;}
.hr2 {height:0px;border:none...

			
		

	





	

		

			

				
					
hr css样式大全

				
			

			

				

					xigl0727的专栏
				

				

					08-28
					
					7085
					
				

			

		

		

			
				
以下是引用片段： Fu&lN:mjv#@0hr在css受支持的并不多!也似乎足够 只是改变有些不同而已中国经济网 经济博客#u!E wg~+WnB中国经济网 经济博客"v5}X4F-J"g!MK.e在一个页面里有许多  就在里改变做样!!中国经济网 经济博客v(|1T)@o9^ eO0i8dG9p`0例如leZ3EU!_]E0这里CSS指线宽度90% 

			
		

	



		

			
		



	

		

			

				
					
css改变hr的颜色，长度，宽度

				
			

			

				

					宏斌的博客
				

				

					01-26
					
					1万+
					
				

			

		

		

			
				
hr本身具有border：1px，要该改变它的颜色，要先把它的border变为none，然后设置1px的高度，再设置background: #90EE90;，设置color不生效
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hr...

			
		

	





	

		

			

				
					
css控制水平衡线hr标签样式去掉阴影效果

				
			

			

				

					09-25
				

			

		

		

			
				
为了获得更自定义的视觉效果，我们可以利用CSS来控制`<hr>`标签的样式，比如去除阴影效果。  首先，我们来分析一下`<hr>`标签的默认样式。默认情况下，水平平衡线的高度约为2个像素，这是因为`border-top`和`border-...

			
		

	





	

		

			

				
					
css中hr标签的各种用法

				
			

			

				

					12-09
				

			

		

		

			
				
然而，通过CSS，我们可以进一步定制`<hr>`标签的外观，使其在设计中发挥更多作用。本文将详细介绍`<hr>`标签的各种CSS用法。  1. **基本使用**  `<hr>`标签默认会生成一条横跨页面的单线条。例如：  ```html  <hr>  ...

			
		

	





	

		

			

				
					
css控制水平衡线hr标签样式去掉其阴影效果

				
			

			

				

					09-25
				

			

		

		

			
				
为了去掉这种阴影效果，我们可以利用CSS来调整`<hr>`标签的样式。主要涉及到的CSS属性有`border-top`和`border-bottom`。这两个属性分别定义了元素顶部和底部的边框。在默认情况下，`<hr>`的`border-top`和`border-...

			
		

	





	

		

			

				
					
html设置分割线虚线,css border设置虚线样式

					
最新发布

				
			

			

				

					01-15
				

			

		

		

			
				
然后在CSS中定义`.custom-hr`类来设置虚线样式：  ```css .custom-hr {  border: 0; /* 清除默认边框 */  height: 1px; /* 设置分割线的高度 */  background-color: transparent; /* 背景透明 */  border-top: 1px ...

			
		

	





	

		

			

				
					
[css - hr ] border color 横线高度和颜色

				
			

			

				

					iteye_3352的博客
				

				

					04-28
					
					897
					
				

			

		

		

			
				

如果设定 hr 的 border，会发现其高度会比不设置高2倍，即使高度设为最小值： 1px;
[code="css"]
hr{
    border: 1px solid #bbe;
}
[/code]
这是什么原因？

原来 hr 也是遵守盒子模型，具有四条边：
[code="css"]
border-top
border-bottom
border-right
...

			
		

	





	

		

			

				
					
【实战】前端必会 —— css更改hr标签颜色

				
			

			

				

					程序边界
				

				

					08-12
					
					767
					
				

			

		

		

			
				
css更改hr标签颜色。

			
		

	





	

		

			

				
					
css+div <hr>水平线标记

				
			

			

				

					yang262067656的专栏
				

				

					06-21
					
					1833
					
				

			

		

		

			
				
水平线标记，用于在页面中插入一条水平标尺线，使页面看起来整齐明了。

主要属性有：

1、size：用于设置线条的粗细，单位为像素，默认值为2.
2、color：用于设置线条的色彩，色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示，默认为黑色。
3、width:用于设置线条的长度，可以是绝对值，以像素为单位，即线段的长度是固定的，不随窗口尺寸的改变而改变。也可以是相对值，...

			
		

	





	

		

			

				
					
为<hr>添加样式

				
			

			

				

					justforuse的博客
				

				

					12-25
					
					3544
					
				

			

		

		

			
				
内容不多，顶多算是随笔了。 
   < hr>默认样式( 没有空格标签就给编译成下面这个样子了..): 
    
   < hr>首先是一个块元素，类似带有默认样式的div元素。那我们就知道怎么对它修改样式了，常见的需要就是改个颜色或者高度了。//css
hr{
    background-color: red;
    height: 1px;
    border: none;
}高度设为1

			
		

	





	

		

			

				
					
HR线条样式CSS定制

				
			

			

				

					我的博客
				

				

					09-13
					
					2万+
					
				

			

		

		

			
				
在一个页面里有许多  就在里改变做样!!例如这里CSS指线宽度90%   高度3px 离上下右下左距离 10px 0px 10px 0pxhr{width: 90%;height: 3px;margin: 10 0 10 0;}  在页面有了就会受到有改变hr{}的影响HTML要贴:hr {margin:0;HEIGHT: 25;width:100%;border:4px ridge;COLOR:

			
		

	





	

		

			

				
					
css控制hr标签样式去掉阴影

				
			

			

				

					ELIFE
				

				

					01-22
					
					6519
					
				

			

		

		

			
				
html中水平衡线hr默认高度是两个像素，其中border-top高1px，且颜色为黑，border-bottom高1px颜色为灰，这时看着是阴影效果
去掉阴影效果很简单，只需在css里把border-bottom或border-top属性设置一个为none即可。




Insert title here

.hrtest{
height:20px;
width:50px;


			
		

	





	

		

			

				
					
通过CSS自定义HTML中hr样式-颜色-形状

				
			

			

				

					weixin_33850890的博客
				

				

					11-13
					
					817
					
				

			

		

		

			
				
修改颜色，线条形状，粗细等...
CSS代码：
.zh_hr{
    border:3px solid rgba(255, 255, 255, 0.50);
    margin-bottom: 2px;
    margin-top: 2px
}
HTML代码：
<hr class="zh_hr"/>


本文转自ZH奶酪博客园博客，原...

			
		

	





	

		

			

				
					
css设置hr颜色

				
			

			

				

					y1668239128的博客
				

				

					09-15
					
					2754
					
				

			

		

		

			
				
css设置hr颜色

行内样式


<body>
    <hr style="border: 0; background-color: red; height: 1px; ">//行内式改变hr颜色
</body>

注意


<body>
    <hr style="background-color:red;">//直接设置颜色没有效果
    <hr style="border: 0; background-color: red;"&

			
		

	





	

		

			

				
					
CSS定义HR水平线的几种样式

				
			

			

				

					咫尺天涯
				

				

					01-27
					
					2356
					
				

			

		

		

			
				
转载:CSS定义HR水平线的几种样式
[url]http://www.sx918.com/Design/Rules/5701282010.html[/url]

 [code="html"]

 
 






[/code]

如图所示:
[img]http://dl.iteye.com/upload/attachment/405767/838af187-c39...

			
		

	





	

		

			

				
					
html5-设置hr的颜色大小

					
热门推荐

				
			

			

				

					sevenbblythelulu的博客
				

				

					05-13
					
					3万+
					
				

			

		

		

			
				
在css文件中单纯的设置hr的颜色、样式不起作用
直接在html页面中设置

        
        您上传的超市小票
        


.tpl_title{ width:100%; height: 64px; line-height: 64px;}
.hr{float:left; width: 25%; margin-top: 32px;} 
.hr_t{fl

			
		

	





	

		

			

				
					
css 改变hr样式

				
			

			

				

					05-28
				

			

		

		

			
				
要改变 `<hr>` 元素的样式，你可以使用 CSS。以下是一些常用的样式更改：  1. 更改颜色：  ``` hr {  border-top: 1px solid #000; } ```  2. 更改宽度和高度：  ``` hr {  height: 2px;  border: none;  background...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值