CSS實(shí)現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變效果

發(fā)布時(shí)間：2021-10-27 14:46:46 作者：登樓痕

這篇文章主要介紹了CSS實(shí)現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變效果，單純用css實(shí)現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變所有效果，因?yàn)閁I沒給背景切圖，尋思這個(gè)理論上用css就能實(shí)現(xiàn)，具體實(shí)例代碼跟隨小編一起看看吧

單純用css實(shí)現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變所有效果，因?yàn)閁I沒給背景切圖，尋思這個(gè)理論上用css就能實(shí)現(xiàn)。

看一下最終要實(shí)現(xiàn)的效果：

首先不談內(nèi)容紫藍(lán)色漸變，一個(gè)單純的四切角+黑色邊框+輪廓投影，其實(shí)就直接用網(wǎng)上鋪天蓋地的background:linear-gradient 實(shí)現(xiàn)切角+ 套一層小了1px的偽元素實(shí)現(xiàn)邊框 + filter: box-shadow實(shí)現(xiàn)投影就行了，效果和代碼如下：

<html>
  <body>
    <div class="box"></div>
  </body>
  <style>
    body {
      background-color: #55486b;
    }
    .box {
      margin: 20px;
      width: 200px;
      height: 200px;
      z-index: 0;
      background: linear-gradient(
            135deg,
            transparent calc(10px + 1 * 0.414px),
            #18121a 0
          )
          top left,
        linear-gradient(
            -135deg,
            transparent calc(10px + 1 * 0.414px),
            #18121a 0
          )
          top right,
        linear-gradient(-45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
          bottom right,
        linear-gradient(45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
          bottom left;
      background-size: 55% 50%;
      background-repeat: no-repeat;
      position: relative;
      filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.3));
    }
    .box::after {
      z-index: 1;
      width: calc(100% - 2 * 1px);
      height: calc(100% - 2 * 1px);
      content: "";
      display: block;
      background: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top left,
        linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
        linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
        linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
      background-size: 55% 51%;
      background-repeat: no-repeat;
      position: absolute;
      left: 1px;
      top: 1px;
    }
  </style>
</html>

相當(dāng)于四個(gè)角斜方向用一小段透明色+一大段背景色拼湊起來實(shí)現(xiàn)的切角，background-size要大于50%以免有白色線bug。大的div里再套一層小的偽元素實(shí)現(xiàn)邊框。但由于是四塊背景色拼起來的，所以要實(shí)現(xiàn)整個(gè)內(nèi)容漸變看起來不可能了。

要實(shí)現(xiàn)內(nèi)容區(qū)域也是漸變的，那么換種思路，之間里面那層偽元素background是漸變的，四個(gè)切角通過其他屬性來切掉，這樣就有其他的實(shí)現(xiàn)方法了，先來看看：

方法一：mask遮罩

其他東西不變，之前偽元素那塊是和外層一樣的思路實(shí)現(xiàn)切角，這種思路下是無法做到垂直漸變的（因?yàn)榍薪且呀?jīng)是通過斜對(duì)角透明色漸變做的），那么直接把背景色寫成漸變，通過mask遮罩屬性來將四個(gè)切角變透明：

 .box::after {
      z-index: 1;
      width: calc(100% - 2 * 1px);
      height: calc(100% - 2 * 1px);
      content: "";
      display: block;
      background: linear-gradient(180deg, #3c2f4f, #2e2269);
      -webkit-mask: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top
          left,
        linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
        linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
        linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
      -webkit-mask-size: 55% 51%;
      -webkit-mask-repeat: no-repeat;
      position: absolute;
      left: 1px;
      top: 1px;
    }

稍許更改一下上面的代碼里偽元素的樣式，就實(shí)現(xiàn)了。

方法二：clip-path

clip-path屬性可以直接修剪掉元素周圍的邊界，如果直接運(yùn)用在上面?zhèn)卧?，?huì)發(fā)現(xiàn)投影也被遮蓋了，那么換個(gè)思路，我們索性不要偽元素那一層，直接把div修剪出4個(gè)切角。因?yàn)閒ilter屬性可以疊加，將其父元素添加filter，前n+1個(gè)drop-shadow疊加起來形成一個(gè)類似黑色邊框，最后一個(gè)drop-shadow來實(shí)現(xiàn)淺白色投影。效果如下：

<html>
  <body>
    <div class="outer">
      <div class="box"></div>
    </div>
  </body>
  <style>
    body {
      background-color: #55486b;
    }
    .outer {
      filter: drop-shadow(0px 0px 1px #18121a) drop-shadow(0px 0px 1px #18121a)
        drop-shadow(0px 0px 1px #18121a)
        drop-shadow(2px 1px 3px rgba(255, 255, 255, 0.3));
    }
    .box {
      margin: 20px;
      width: 200px;
      height: 200px;
      border-radius: 12px;
      position: relative;
 
      background: linear-gradient(180deg, #3c2f4f, #2e2269);
      -webkit-clip-path: polygon(
        20px 0%,
        calc(100% - 20px) 0%,
        100% 20px,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        20px 100%,
        0 calc(100% - 20px),
        0 20px
      );
      clip-path: polygon(
        20px 0%,
        calc(100% - 20px) 0%,
        100% 20px,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        20px 100%,
        0 calc(100% - 20px),
        0 20px
      );
      position: relative;
    }
  </style>
</html>

不知道還有沒有更簡(jiǎn)單且兼容性更好的方法~~~~

到此這篇關(guān)于CSS實(shí)現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變效果的文章就介紹到這了,更多相關(guān)css背景色漸變內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！