美文网首页
纯css实现直线渐变

纯css实现直线渐变

作者: 闫涵达人 | 来源:发表于2017-02-28 15:53 被阅读0次

    <html>

    <div class="title">

    <hr>

    <span class="txt">渐变</span>

    </div>

    <css>

    .title{  text-align:center;  white-space:nowrap; }

    .title hr{  background-color:#f0eff5; border:medium none; display:inline-block; height:1.4px; margin:10px16px; vertical-align:middle; width:32%;

    background-image:linear-gradient(to right,transparent,red,transparent);/*两边渐变*/ }

    .title.txt{ display:inline-block; font-size:2rem; vertical-align:middle; }

    相关文章

      网友评论

          本文标题:纯css实现直线渐变

          本文链接:https://www.haomeiwen.com/subject/axwxgttx.html