https://www.wuisou.com/s/qgpk/845588112.html https://www.wuisou.com/s/jb/77292601.html https://www.wuisou.com/s/nygt/356490897.html https://www.wuisou.com/s/hnrp/404524403.html https://www.wuisou.com/s/xy/845922032.html https://www.wuisou.com/s/fcl/370682417.html https://www.wuisou.com/s/wzgw/577211489.html https://www.wuisou.com/s/jgwt/806991710.html https://www.wuisou.com/s/smd/176201864.html https://www.wuisou.com/s/dgj/760301438.html https://www.wuisou.com/s/rm/997214188.html https://www.wuisou.com/s/qp/98531543.html https://www.wuisou.com/s/nl/689720595.html https://www.wuisou.com/s/nzj/345459086.html https://www.wuisou.com/s/hnrp/168479435.html https://www.wuisou.com/s/smd/246781854.html https://www.wuisou.com/s/rwj/516057050.html https://www.wuisou.com/s/mbpl/253984414.html https://www.wuisou.com/s/nygt/89969494.html https://www.wuisou.com/s/qgpk/645341058.html https://www.wuisou.com/s/rd/452955814.html https://www.wuisou.com/s/stgg/73894108.html https://www.wuisou.com/s/nl/570464912.html https://www.wuisou.com/s/qly/434944877.html https://www.wuisou.com/s/lqhc/968101341.html https://www.wuisou.com/s/jgwt/220452397.html https://www.wuisou.com/s/pxf/772073564.html https://www.wuisou.com/s/hhjj/691203420.html https://www.wuisou.com/s/mbpl/124229471.html https://www.wuisou.com/s/qp/532418646.html https://www.wuisou.com/s/hrm/408200678.html https://www.wuisou.com/s/nl/655505358.html https://www.wuisou.com/s/jfz/437866735.html https://www.wuisou.com/s/wzgw/976254265.html https://www.wuisou.com/s/yx/85949330.html https://www.wuisou.com/s/lxgg/443736280.html https://www.wuisou.com/s/xy/18715071.html https://www.wuisou.com/s/qtqx/737905573.html https://www.wuisou.com/s/tpn/565334812.html https://www.wuisou.com/s/rwj/690265292.html https://www.wuisou.com/s/jcr/98387597.html https://www.wuisou.com/s/brjh/114791981.html https://www.wuisou.com/s/zz/876040021.html https://www.wuisou.com/s/tcfx/610007184.html https://www.wuisou.com/s/sj/163474468.html https://www.wuisou.com/s/xy/276614573.html https://www.wuisou.com/s/nl/22945304.html https://www.wuisou.com/s/zz/690258055.html https://www.wuisou.com/s/gwtj/352671847.html https://www.wuisou.com/s/nygt/345075827.html https://www.wuisou.com/s/qp/435448612.html https://www.wuisou.com/s/zz/229350405.html https://www.wuisou.com/s/tcfx/71414456.html https://www.wuisou.com/s/qgpk/509367461.html https://www.wuisou.com/s/jfz/815382406.html https://www.wuisou.com/s/yc/888603660.html https://www.wuisou.com/s/hhjj/148074244.html https://www.wuisou.com/s/qtqx/909521874.html https://www.wuisou.com/s/qly/272314514.html https://www.wuisou.com/s/fnn/895515574.html https://www.wuisou.com/s/wzgw/954835991.html https://www.wuisou.com/s/fnn/479232795.html https://www.wuisou.com/s/jb/586555406.html https://www.wuisou.com/s/lxgg/690077148.html https://www.wuisou.com/s/dgj/330831554.html https://www.wuisou.com/s/zz/229604925.html https://www.wuisou.com/s/nl/941987085.html https://www.wuisou.com/s/nwr/733757713.html https://www.wuisou.com/s/brjh/900942381.html https://www.wuisou.com/s/msg/282229255.html https://www.wuisou.com/s/jfz/172031429.html https://www.wuisou.com/s/nygt/215154078.html https://www.wuisou.com/s/hm/389371774.html https://www.wuisou.com/s/smd/191446913.html https://www.wuisou.com/s/mkfw/85640016.html https://www.wuisou.com/s/nygt/15478640.html https://www.wuisou.com/s/mkfw/568838715.html https://www.wuisou.com/s/lxgg/699376897.html https://www.wuisou.com/s/wg/537613895.html https://www.wuisou.com/s/fcl/463512527.html https://www.wuisou.com/s/hrm/183615005.html https://www.wuisou.com/s/rm/656020449.html https://www.wuisou.com/s/yc/286822089.html https://www.wuisou.com/s/qly/480601228.html https://www.wuisou.com/s/wg/218640988.html https://www.wuisou.com/s/rwj/639280595.html https://www.wuisou.com/s/jb/482665978.html https://www.wuisou.com/s/msg/798132101.html https://www.wuisou.com/s/msg/963740086.html https://www.wuisou.com/s/gwtj/487742232.html https://www.wuisou.com/s/jb/393503399.html https://www.wuisou.com/s/stgg/745577775.html https://www.wuisou.com/s/fcl/744100657.html https://www.wuisou.com/s/msg/396789116.html https://www.wuisou.com/s/msg/116348245.html https://www.wuisou.com/s/brjh/584689046.html https://www.wuisou.com/s/lqhc/766009324.html https://www.wuisou.com/s/stgg/475464168.html https://www.wuisou.com/s/msg/878084419.html https://www.wuisou.com/s/ny/873022077.html

CSS巧妙实现分隔线的几种方法

  • 内容
  • 相关
前几天一@同事看新浪微博里有个类似分隔线的提示,就自己试了几种方法来实现这个分隔线。下面就是简单实现分隔线的几种方法,个人比较喜欢第二种,我也给出了最后第五种比较2的写法,请大家拍砖,或者提供其他好的方法。

单个标签实现分隔线:

.demo_line_01{
    padding: 0 20px 0;
    margin: 20px 0;
    line-height: 1px;
    border-left: 200px solid #ddd;
    border-right: 200px solid #ddd;
    text-align: center;
}
优点:代码简洁

巧用背景色实现分隔线:

.demo_line_02{
    height: 1px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.demo_line_02 span{
    position: relative;
    top: -8px;
    background: #fff;
    padding: 0 20px;
}
优点:代码简洁,可自适应宽度

inline-block实现分隔线:

.demo_line_03{
    width:600px;
}
.demo_line_03 b{
    background: #ddd;
    margin-top: 4px;
    display: inline-block;
    width: 180px;
    height: 1px;
    _overflow: hidden;
    vertical-align: middle;
}
.demo_line_03 span{
    display: inline-block;
    width: 220px;
    vertical-align: middle;
}
优点:文字可多行

浮动实现分隔线:
.demo_line_04{
    width:600px;
}
.demo_line_04{
    overflow: hidden;
    _zoom: 1;
}
.demo_line_04 b{
    background: #ddd;
    margin-top: 8px;
    float: left;
    width: 26%;
    height: 1px;
    _overflow: hidden;
}
优点:NUN

利用字符实现分隔线:
<div class="demo_line_05">———————————<span>小小分隔线 字符来实现</span>————————————</div>
.demo_line_05{
    letter-spacing: -1px;
    color: #ddd;
}
.demo_line_05 span{
    letter-spacing: 0;
    color: #222;
    margin:0 20px;
}
优点:代码简洁 以上简单介绍了分隔线的写法,也许还有其它比较合适的写法,看环境各取所需吧!
评论后还是无法显示下载地址?清理缓存-点我试试
热度:2645° 评分:8.7 发布时间: 2018年1月12日

本文标签:

版权声明:若无特殊注明,本文皆为《小刀娱乐网》原创,转载请保留文章出处。

本文链接:CSS巧妙实现分隔线的几种方法 - https://www.wuisou.com/post-926.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注