版权声明:本文为博主原创文章未经博主允许不得转载。 /qq_/article/details/
今天给大家带来HTML中一个神奇的元素HR。在网页中HR是一个很常见的元素,但是由于浏览器兼容等问题HR样式的設定却着实让人有点捉摸不透。所以就HR的样式设定我来所一个简单的介绍吧。
- 使用行内样式对hr进行布局设置其宽600px,高10px,颜色为红色
2.使鼡CSS样式对hr进行样式设定的时候,浏览器将hr默认为是一个小的div,所以当用color对hr进行颜色改变时大多数浏览器都显示hr的默认颜色,FireFox除外
(1)当没有給横线设置高度时:
在大多数浏览器显示如下:
(2)当设置了hr的高度的时候:
在大多数浏览器中显示如下:
3.所以根据hr样式的特性,如果我们想使用CSS样式将hr变成我们理想中的样子就需要对它同时设置它的边框颜色(border-color)和背景颜色(background-color)
提示:在CSS样式中对hr高度的设置和行内样式正好相反,在CSS樣式中使用size设置hr的高度是无效的所以只能使用height。并且我们可以通过对border-color和background-color不同颜色的设置,达到hr不同的显示效果在这里就不在演示了。
以上就是关于hr样式设置的有关介绍对hr设置border和background可以达到所有浏览器的兼容,大家可以动手试试!