8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. css
  3. 使用 HTML 和 CSS 创建水平线的正确方法是什么？

使用 HTML 和 CSS 创建水平线的正确方法是什么？

scibuff 2月前
124 0

我需要在某个块后画一条水平线，有三种方法可以做到：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>

哪种方式最实用？

帖子版权声明 1、本帖标题：使用 HTML 和 CSS 创建水平线的正确方法是什么？
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由scibuff在本站《css》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 4楼

    您可以使用两种不同的技术来实现 透明的剪切圆圈 ：

    1.SVG

    以下示例使用 内联 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 的主要优点是：

    • 更短的代码
    • 您可以轻松地使用图像或渐变来填充圆形蒙版
    • 保持形状的边界并仅在符合蒙版的填充上触发鼠标事件（ 在示例中将 鼠标悬停在透明的剪切圆圈上

    transparent cut out circle

    2.CSS 仅使用 BOX-SHADOWS

    创建一个 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>
返回
作者最近主题：