在默认情况下，<hr>标签的貌似是带有阴影效果的，下面就通过代码实例介绍一下如何删除阴影效果。
先看默认状态下的<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>标签的默认阴影效果删除
