zoukankan      html  css  js  c++  java
  • css背景渐变色: 标题两边渐变画线效果

    实现如图效果

    利用背景图属性渐变色控制画线颜色,通过背景图大小属性设置线条的粗细,文字盒子设置背景覆盖部分线条
    以下是实现代码

    1 html 内容

    <template>
      <div class="notice">
        <span class="notice_content">
        公告
        </span>
      </div>
    </template>
    

    2 css 内容

    <style lang="scss">
    .notice {
      position: relative;
      margin: 15px auto 15px;
       100px;
      background-image: linear-gradient(90deg, #fff, #333 50%, #fff);
      background-size: 100% 1px;
      background-position: 50%;
      background-repeat: no-repeat;
      text-align: center;
      > span {
        font-size: 12px;
        color: #333;
        padding: 0 6px;
        background-color: #fff;
      }
    }
    </style>
    

      


    ————————————————
    原文链接:https://blog.csdn.net/weixin_44486632/article/details/108066852

  • 相关阅读:
    Day2-Python爬虫小练 爬取百科词条
    Day1-python轻量级爬虫
    大数据处理课堂测试1
    周记7-28
    周记7-21
    周记7-14
    软件工程课程总结
    进度15
    NABCD
    团队项目成员和题目
  • 原文地址:https://www.cnblogs.com/jisi2012/p/15709636.html
Copyright © 2011-2022 走看看