如何将<hr>标签的默认阴影效果删除

最新推荐文章于 2024-07-20 23:59:39 发布

weixin_34248023

最新推荐文章于 2024-07-20 23:59:39 发布

阅读量747

点赞数 1

文章标签：开发工具 python

原文链接：https://yq.aliyun.com/articles/572954

版权

在默认情况下，<hr>标签的貌似是带有阴影效果的，下面就通过代码实例介绍一下如何删除阴影效果。

先看默认状态下的<hr>标签的表现:

代码如下:

 
          <!DOCTYPE html> 
         
 
          < 
          html 
          > 
         
 
          < 
          head 
          > 
         
 
          < 
          meta 
          charset 
          = 
          " utf-8" 
          > 
         
 
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          /> 
         
 
          < 
          title 
          >蚂蚁部落</ 
          title 
          > 
         
 
          </ 
          head 
          >  
         
 
          < 
          body 
          >  
         
 
          < 
          hr 
          />  
         
 
          </ 
          body 
          >  
         
 
          </ 
          html 
          > 
         

在上面的代码中，水平线具有一定的阴影效果，但是有时候这是不需要的，下面介绍一下如何删除此效果。

先介绍一下出现阴影效果的原因，在默认条件下，<hr>的高度是两个像素，这两个像素是由上边框和下边框组合而成的，之所以会出现阴影效果，是因为上边框和下边框的颜色是不同的，上边框是黑色，下边框为灰色，所以只要随便将一个边框设置为none，那么就不会出现阴影效果。

代码如下:

 
          <!DOCTYPE html> 
         
 
          < 
          html 
          > 
         
 
          < 
          head 
          > 
         
 
          < 
          meta 
          charset 
          = 
          " utf-8" 
          > 
         
 
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          /> 
         
 
          < 
          title 
          >蚂蚁部落</ 
          title 
          > 
         
 
          < 
          style 
          type 
          =  
          "text/css" 
          >  
         
 
          .antzone{ 
         
 
             
          border-bottom:none; 
         
 
             
          border-color:red; 
         
 
          }  
         
 
          </ 
          style 
          >  
         
 
          </ 
          head 
          >  
         
 
          < 
          body 
          >  
         
 
          < 
          hr 
          class 
          = 
          "antzone" 
          />  
         
 
          </ 
          body 
          >  
         
 
          </ 
          html 
          > 
         

上面的代码将下边框设置为none，这样就消除了阴影效果。

原文发布时间为：2017-2-19

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：如何将<hr>标签的默认阴影效果删除

weixin_34248023

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何将<hr>标签的默认阴影效果删除

在默认情况下，<hr>标签的貌似是带有阴影效果的，下面就通过代码实例介绍一下如何删除阴影效果。先看默认状态下的<hr>标签的表现:代码如下:0102030405060708091011<!DOCTYPE html><html><head>...
复制链接

扫一扫