我需要在某个块后画一条水平线,有三种方法可以做到:1)定义一个 h_line 类并向其添加 css 功能,如#css.hline { width:100%; height:1px; background: #fff...
我需要在某个块后画一条水平线,有三种方法可以做到这一点:
1)定义一个类 h_line
并向其添加 CSS 特性,例如
#css
.hline { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <div class="h_line"></div>
2)使用 hr
标签
#css
hr { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <hr />
伪类 after
一样使用它
#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
<div class="block_1 h_line">Lorem</div>
哪种方式最实用?
可以使用 径向渐变 背景和指针事件来实现(允许鼠标通过圆形层进行交互,例如文本选择)。这是 一个演示页面 和一个屏幕截图:
它的代码如下:
body {
margin: 0;
padding: 0;
}
.underneath {
padding: 0;
margin: 265px 0 0 0;
width: 600px;
}
.overlay {
top: 0;
left: 0;
position: absolute;
width: 600px;
height: 600px;
background: -moz-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px);
background: -webkit-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px);
background: -ms-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px);
background: -o-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px);
pointer-events: none;
/* send mouse events beneath this layer */
}
<body>
<p class="underneath">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="overlay"></div>
</body>