先看默认状态下的<hr>标签的表现:
代码如下:
|
01
02
03
04
05
06
07
08
09
10
11
|
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<title>蚂蚁部落</title>
</head>
<body>
<hr/>
</body>
</html>
|
在上面的代码中，水平线具有一定的阴影效果，但是有时候这是不需要的，下面介绍一下如何删除此效果。
先介绍一下出现阴影效果的原因，在默认条件下，<hr>的高度是两个像素，这两个像素是由上边框和下边框组合而成的，之所以会出现阴影效果，是因为上边框和下边框的颜色是不同的，上边框是黑色，下边框为灰色，所以只要随便将一个边框设置为none，那么就不会出现阴影效果。
代码如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<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>标签的默认阴影效果删除