zoukankan      html  css  js  c++  java
  • css mask文字渐变+clip-path裁剪路径+border-image图片边框

    一、mask

    <template>
      <div>
        <div class="textGradient" data-text="这是一段中文">这是一段中文</div>
      </div>
    </template>
    
    <script>
      export default {
        name: "a9"
      }
    </script>
    
    <style scoped>
      .textGradient {
        position: relative;
        color: red;
      }
    
      .textGradient:after {
        content: attr(data-text);
        position: absolute;
        left: 0;
        color: green;
        mask: linear-gradient(to right, #000000, transparent);
      }
    </style>

    二、clip-path

    <template>
      <div>
        <div class="blockClipPath"></div>
      </div>
    </template>
    
    <script>
      export default {
        name: "a9"
      }
    </script>
    
    <style scoped>
      .blockClipPath {
         200px;
        height: 200px;
        background-color: red;
        clip-path: circle(100px at 100px 200px);
      }
    </style>

    三、border-image

    <template>
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400" style="display: block">
          <defs>
            <clipPath id="svgClipPath">
              <path :d="clipPath"/>
            </clipPath>
          </defs>
          <path :d="clipPath"/>
        </svg>
        <div class="clipPathSty"></div>
      </div>
    </template>
    
    <script>
      export default {
        name: "a9",
        data() {
          return {
            clipdeg: 45
          }
        },
        computed: {
          clipPath() {
            let mathclipdeg = (Math.PI / 180) * this.clipdeg
            return `M400 200,A200 200 0 0 0 ${200 + Math.round(Math.cos(mathclipdeg) * 200)} ${200 - Math.round(Math.sin(mathclipdeg) * 200)},L200 200,Z`
          }
        }
      }
    </script>
    
    <style scoped>
      .clipPathSty {
         400px;
        height: 400px;
        background-color: red;
        clip-path: url("#svgClipPath");
        /*参数1为九宫格图片路径,参数2和参数3表示几个像素点(为九宫格图片宽高的1/3,不能带单位),参数4表示拉伸*/
        /*border-image: url("") 8 8 stretch;*/
      }
    
      path {
        fill: green;
      }
    </style>
  • 相关阅读:
    mvc:三
    mvc:二
    Linq分组,linq方法分组
    Linq 中按照多个值进行分组(GroupBy)
    Photoshop 字体
    报表Reporting S而vice是 错误的解决
    1*书籍装帧
    photoshop 魔术橡皮擦
    Photoshop 钢笔 双窗口显示
    数字格式化
  • 原文地址:https://www.cnblogs.com/linding/p/14355064.html
Copyright © 2011-2022 走看看