我需要在某个块后画一条水平线,有三种方法可以做到: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>
哪种方式最实用?
您可以使用两种不同的技术来实现 透明的剪切圆圈 :
以下示例使用 内联 svg 。第一个代码片段使用 mask 元素 剪切出透明圆圈,第二个空心圆圈使用 path 元素 。圆圈由 2 个 arc 命令 :
使用 mask 元素:
body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
<svg viewbox="0 0 100 50" width="100%">
<defs>
<mask id="mask" x="0" y="0" width="80" height="30">
<rect x="5" y="5" width="90" height="40" fill="#fff"/>
<circle cx="50" cy="25" r="15" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/>
</svg>
使用一个路径元素:
body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
svg{
display:block;
width:70%;
height:auto;
margin:0 auto;
}
path{
transition:fill .5s;
fill: rgba(227, 223, 210, .8);
}
path:hover{
fill:pink;
}
<svg viewbox="-10 -1 30 12">
<path d="M-10 -1 H30 V12 H-10z M 5 5 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/>
</svg>
在这种情况下使用 SVG 的主要优点是:
创建一个 div, overflow:hidden;
并在其内部创建一个带有 border-radius 的圆形伪元素。给它一个巨大的 box-shadow 并且没有背景:
div{
position:relative;
width:500px; height:200px;
margin:0 auto;
overflow:hidden;
}
div:after{
content:'';
position:absolute;
left:175px; top:25px;
border-radius:100%;
width:150px; height:150px;
box-shadow: 0px 0px 0px 2000px #E3DFD2;
}
body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
<div></div>
浏览器支持 box-shadows 是 IE9+ 请参阅 canIuse
相同的方法是使用边框而不是框阴影。如果您需要支持不支持框阴影的浏览器(如 IE8),那么这很有趣。技术是相同的,但您需要使用顶部和左侧值进行补偿,以将圆圈保持在 div 的中心:
body{
background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');
background-size:cover;
}
div{
position:relative;
width:500px; height:200px;
margin:0 auto;
overflow:hidden;
}
div:after{
content:'';
position:absolute;
left:-325px; top:-475px;
border-radius:100%;
width:150px; height:150px;
border:500px solid #E3DFD2;
}
<div></div>