【正在完善】高级CSS特效解析其示范案例

/* 关键字值 */
shape-outside: none;         /* 该浮动区域不产生影响，行内元素以默认的方式包裹着该元素的margin box。 */ 
shape-outside: margin-box;   /* 定义一个由外边距的外边缘封闭形成的形状。这个形状的角的半径由相应的border-radius 和margin 的值决定。 */
shape-outside: content-box;  /* 定义一个由内容区域的外边缘封闭形成的形状，每一个角的弧度取 0 或 border-radius - border-width - padding 中的较大值。 */
shape-outside: border-box;   /* 定义一个由边界的外边缘封闭形成的形状。 这个形状遵循正常的边界外部圆角的形成规则。 */
shape-outside: padding-box;  /* 定义一个由内边距的外边缘封闭形成的形状。这个形状遵循正常的边界内部圆角的形成规则。 */
/* 函数值，参见 2.2.2节：形状函数 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
/* <url> 值 */
shape-outside: url(image.png);
/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
/* 全局值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    China launched a Long March 11 solid-propellant carrier rocket on 
    Wednesday morning from the Jiuquan Satellite Launch Center in 
    Northwest China, deploying three satellites into space, according 
    to China Aerospace Science and Technology Corp (CASC).
    The rocket blasted off at 10:29 am and soon placed the Tianping 2A, 
    2B and 2C satellites into their planned orbit.
  </p>
</div>
<style lang="scss">
.box {
  width: 460px;
  margin: auto;
  .left {
    float: left;
    shape-outside: polygon(0 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }
  .right {
    float: right;
    shape-outside: polygon(100% 0, 100% 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  .left, .right {
    width: 40%;
    height: 12ex;
    background-color: rgb(91, 208, 143);
    border-radius: 69%;
  }
}
</style>

shape-outside: polygon(100% 0, 100% 100%, 0 100%);

inset( <shape-arg>{1,4} [round <border-radius>]? )

shape-outside: inset(20px 50px 10px 0 round 50px);

circle( [<shape-radius>]? [at <position>]? )

ellipse( [<shape-radius>{2}]? [at <position>]? )

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

<section>
<div class="shape"></div>
Greater effort will be paid to training intellectual property specialists, 
the most fundamental, core and critical element in helping our country become a 
global center of IPR, an official from the country's top IPR regulator said.
"As we train more specialists, we plan to optimize the system by paying close 
attention to education on IPR protection, application, public services and 
international affairs," Feng Zhaolong, from the National Intellectual 
Property Administration's Personnel Department, told a news conference on 
Wednesday.
</section>
<style lang="scss">
section {
  max-width: 400px;
  margin: auto;
  .shape {
    float: left;
    width: 150px;
    height: 150px;
    background-color: rgb(0, 128, 38);
    clip-path: polygon(0 0, 150px 150px, 0 150px);
    shape-outside: polygon(0 0, 150px 150px, 0 150px);
  }
}
.sm-30{
  shape-margin: 30px;
}
.sm-60{
  shape-margin: 60px;
}
</style>

<div class="shape"></div>

<div class="shape sm-30"></div>

<div class="shape sm-60"></div>

/* <length> 值 */
shape-margin: 10px;
shape-margin: 20mm;
/* <percentage> 值 */
shape-margin: 60%;
/* Global 值 */
shape-margin: inherit;
shape-margin: initial;
shape-margin: unset;

<svg viewBox="0 0 100 100">
  <-- 定义一条剪切路径 -->
  <clipPath id="myClip">
    <!-- 圆圈外的所有东西都会被裁剪掉，因此不可见。 -->
    <circle cx="40" cy="35" r="35"></circle>
  </clipPath>
  <!-- 作为引用元素（英文原文：for reference）的黑色心形 -->
  <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z"></path>
  <!-- 和上述黑色心形形状相同的红色心形，剪切路径是上面定义的圆； 红色心形只有在圆内的部分可见。-->
  <use clip-path="url(#myClip)" xlink:href="#heart" fill="red"></use>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="65.011909mm" height="63.5mm" viewBox="0 0 65.011909 63.5" version="1.1" id="svg8">
  <defs id="defs2" />
  <g id="layer1" transform="translate(-2.8606183,-2.2678528)">
    <ellipse style="opacity:0.999;fill:#2f60e8;fill-opacity:0.414226;stroke-width:0.0740937" id="path902" cx="34.376438" cy="33.545383" rx="20.530245" ry="21.828125" />
    <ellipse style="opacity:0.999;fill:#bfc253;fill-opacity:0.414226;stroke-width:0.0740937" id="path924" cx="34.773808" cy="34.518612" rx="30.994047" ry="5.8393712" />
  </g>
</svg>

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="65.011909mm" height="63.5mm" viewBox="0 0 65.011909 63.5" version="1.1" id="svg8">
  <clipPath id="svgclip">
    <defs id="defs2" />
    <g id="layer1" transform="translate(-2.8606183,-2.2678528)">
      <ellipse style="opacity:0.999;fill:#2f60e8;fill-opacity:0.414226;stroke-width:0.0740937" id="path902" cx="34.376438" cy="33.545383" rx="20.530245" ry="21.828125" />
      <ellipse style="opacity:0.999;fill:#bfc253;fill-opacity:0.414226;stroke-width:0.0740937" id="path924" cx="34.773808" cy="34.518612" rx="30.994047" ry="5.8393712" />
    </g>
  </clipPath>
</svg>

/* 键值 */
mask-image: none;
/* <mask-source> 值 */
mask-image: url(masks.svg#mask1);
/* <image> 值 */
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-image: image(url(mask.png), skyblue);
/* 多个值 */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);
/* Global 值 */
mask-image: inherit;
mask-image: initial;
mask-image: unset;

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="0 0 99.999997 99.999997"
   height="100"
   width="100">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(0,-952.36223)"
     id="layer1">
    <path
       d="M 50.000001,954.80939 65.450848,986.11624 100,991.13652 74.999998,1015.5055 80.901699,1049.915 50,1033.6691 19.098298,1049.915 25.000001,1015.5055 -1.2134336e-6,991.13652 34.549151,986.11624 Z"
       id="path4136"
       style="opacity:1;fill:#000000;fill-opacity:0.50222224;stroke:none;stroke-width:22.67716599;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
</svg>

<div class="box">
  <div class="masked"></div>
</div>
<style scoped lang="scss">
.box{
  width: 600px;
  height: 600px;
  .masked {
    width: 100%;
    height: 100%;
    background-image: url(../assets/img/backr.png);
    background-repeat:no-repeat;
    background-size:100%;
    mask-image: url(../assets/img/star.svg);
    -webkit-mask-image: url(../assets/img/star.svg);
  }
}
</style>

mix-blend-mode: <blend-mode>;

background-blend-mode: <blend-mode>

grayscale(amount)

hue-rotate(angle)

hue-rotate(0deg)    /* 无效果 */
hue-rotate(90deg)   /* 90deg 旋转 */
hue-rotate(.5turn)  /* 180deg 旋转 */
hue-rotate(-90deg)  /* 与旋转 270deg 一样 */
hue-rotate(405deg)  /* 与旋转 45deg 一样 */

<img class="pic" src="../assets/img/pic.png">
<style scoped lang="scss">
.pic{
  animation:huerotate 2s infinite;
}
@keyframes huerotate {
  0% {filter: hue-rotate(0);}
  13% {filter: hue-rotate(45deg);}
  25% {filter: hue-rotate(90deg);}
  36% {filter: hue-rotate(135deg);}
  50% {filter: hue-rotate(180deg);}
  63% {filter: hue-rotate(225deg);}
  75% {filter: hue-rotate(270deg);}
  88% {filter: hue-rotate(315deg);}
  100% {filter: hue-rotate(360deg);}
}
</style>

<img class="pic" src="../assets/img/pic.png">
<style scoped lang="scss">
.pic{
  animation:contrast 2s infinite;
}
@keyframes contrast {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

blur(radius)

<div class="line" >
  <img class="blur1" src="../assets/img/Jclee.png">
  <img class="blur2" src="../assets/img/Jclee.png">
  <img class="blur3" src="../assets/img/Jclee.png">
  <img class="blur4" src="../assets/img/Jclee.png">
  <img class="blur5" src="../assets/img/Jclee.png">
</div>
<div class="line" >
  <p>0</p>
  <p>1px</p>
  <p>2px</p>
  <p>0.3rem</p>
  <p>1.5rem</p>
</div>
<style scoped lang="scss">
.line{
  display: flex;
  flex-direction: row;
  justify-content: center;
  p{
    width: 200px;
    text-align: center;
  }
}
img{
  height: 200px;
  width: 200px;
  &.blur1{ filter: blur(0); }
  &.blur2{ filter: blur(1px); }
  &.blur3{ filter: blur(2px); }
  &.blur4{ filter: blur(.3rem); }
  &.blur5{ filter: blur(1.5rem); }
}
</style>

backdrop-filter: <filter-function-list>

/* 关键词值 */
backdrop-filter: none;                  // 表示没有应用于背景的滤镜。
/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;

<div class="line">
  <img class="i1" src="../assets/img/JackLee.png">
  <img class="i2" src="../assets/img/JackLee.png">
  <img class="i3" src="../assets/img/JackLee.png">
  <img class="i4" src="../assets/img/JackLee.png">
</div>
<div class="line">
  <img class="i5" src="../assets/img/JackLee.png">
  <img class="i6" src="../assets/img/JackLee.png">
  <img class="i7" src="../assets/img/JackLee.png">
  <img class="i8" src="../assets/img/JackLee.png">
</div>
<div class="line">
  <img class="i9" src="../assets/img/JackLee.png">
  <img class="i10" src="../assets/img/JackLee.png">
  <img class="i11" src="../assets/img/JackLee.png">
  <img class="i12" src="../assets/img/JackLee.png">
</div>
<center><p>CSS 滤镜效果展示</p></center>
</template>
<style lang="scss">
.line{
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  img{
    width: 100px;
    transition: all 0.5s;
    &.i1:hover{
      filter: blur(2px);
    }
    &.i2:hover{
      filter: brightness(0.4);
    }
    &.i3:hover{
      filter: contrast(200%);}
    &.i4:hover{
      filter: grayscale(80%);}
    &.i5:hover{
      filter: hue-rotate(90deg);}
    &.i6:hover{
      filter: drop-shadow(16px 16px 20px blue);
    }
    &.i7:hover{
      filter: invert(75%);
    }
    &.i8:hover{
      filter: opacity(25%);
    }
    &.i9:hover{
      filter: saturate(30%);
    }
    &.i10:hover{
      filter: sepia(60%);
    }
    &.i11:hover{
      filter: contrast(195%) brightness(16%);
    }
    &.i12:hover{
      filter: grayscale(125%) blur(3px);
    }
  }
}
</style>