css揭祕實戰技巧 - 視覺效果[三]

全目錄

本系列文章，主要是圍繞css3屬性，實現我們常見的各種效果，這些效果都是我們實戰開發中經常可以用到的效果：

1. css揭祕實戰技巧- 背景與邊框 [一]
2. css揭祕實戰技巧- 形狀 [二]
3. css揭祕實戰技巧 - 視覺效果[三]
4. css揭祕實戰技巧 - 字型排印[四]
5. css揭祕實戰技巧 - 使用者體驗[五]
6. css揭祕實戰技巧 - 結構與佈局[六]
7. css揭祕實戰技巧 - 過渡與動畫[七]

前言

1. 單側投影
2. 不規則投影
3. 染色效果
4. 毛玻璃效果
5. 折角效果

一：單側投影

首先，我們來說明一下box-shadow 屬性值的含義：

box-shadow: 0px 0px 3px red inset;
第一個從引數：表示陰影水平向右的偏移量
第二個引數：表示陰影垂直向下的偏移量
第三個引數：表示陰影的模糊半徑
第四個引數：表示陰影的顏色
第五個引數：表示擴張半徑，根據該值對陰影進行擴大和縮寫
第六個引數：表示陰影向內還是向外，預設是outset向外，也可以設定為inset。
複製程式碼

我們來看一下具體效果，首先是一個矩形：

效果1: 四周陰影：即偏移量為0

程式碼如下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 0px 10px red;
複製程式碼

效果2: 兩側陰影

程式碼如下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  5px -5px 10px red;
複製程式碼

效果3：單側投影 這時，我們可能直接會想到，只設定垂直或者水平一個方向的偏移量不就可以了嘛， 程式碼如下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 5px 10px red;
複製程式碼

實現的效果如下：

這時，我們才醒悟過來，我們設定的陰影寬度為10px, 對於垂直方向，因為我們設定了向下偏移10px, 所以看上去，top方向是沒有任何陰影的，但是left和right方向不管怎麼偏移，肯定會有其中一個方向是有陰影的，那麼，怎麼樣才可以實現真正的單側陰影呢？

啦啦啦，box-shadow的第四個長度引數隆重登場：它排在 模糊半徑引數之後，稱作擴張半徑。這個引數會根據你指定的值去擴大或 (當指定負值時)縮小投影的尺寸。舉例來說，一個 -5px 的擴張半徑會把投 影的寬度和高度各減少 10px(即每邊各 5px)。 程式碼如下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 10px 10px -5px red;
複製程式碼

最終的效果如下：

效果4: 雙側投影

程式碼如下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 10px 10px -10px red, 0px -10px 10px -10px red;
複製程式碼

二：不規則投影

首先，說明一下，什麼是不規則投影，我們平時設定陰影可能大多數都是給一個正方形或者長方形，甚至圓來設定陰影，這些情況下，box-shadow的表現是非常好的，但是如何遇到一些不規則的圖形呢？例如如下效果：

這裡以氣泡的效果為例：

首先，我們可以想到，這是由一個正方形加一個三角形實現的（三角形可以實現原理可以檢視 第二節形狀篇 ），我們先實現此效果：

程式碼如下：

div {
    width: 200px;
    height: 200px;
    background: #dfb311;
    position: relative;
    border-radius: 10px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
div::after {
    content: '';
    display: inline-block;
    border: 20px solid #dfb311;
    border-color: transparent transparent transparent #dfb311;
    position: absolute;
    right: -40px;
    top: calc(50% - 20px);
}
複製程式碼

效果如下：

接下來，我們來設定陰影效果，我們很直接的想到box-shadow，我們在div元素中新增該屬性：

div {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .5)   
}
複製程式碼

效果如下：

此時，我們可以看到正方形的陰影效果有了，但是三角形還沒有，那麼我們再給三角形加一個box-shadow試試看

div::after{
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .5)
}
複製程式碼

效果如下：

怎麼成這樣了？原來三角形的實現原理其實本身就是一個正方形，只不過另外三條邊框的顏色為透明，那麼，接下來該如何給這種不規則的圖形加陰影效果呢？答案就是採用css濾鏡：drop-shadow();

div {
    filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
}
複製程式碼

啦啦啦，這樣就得到我們想要的效果啦。

三：染色效果

我們來看一下比較常見的一個效果：

預設情況下，是一種灰度圖片，hover的時候，灰度消失，正常顯示，那麼如何設定這個灰度效果，就是我們本節要實現的效果，

方案一：讓ui給兩種場景的圖片，然後切換即可，但是很顯然這樣會增加網路請求，而且如果要替換成另外一種效果，就要把所有圖片全部替換，成本有點高。

方案二：給圖片上層新增一層元素，並且設定透明度，這樣看上去有染色效果，但是並不是真正的對圖片進行了染色，同時也大大削弱了圖片的對比度。

方案三： 採用濾鏡的方案

首先，這是一張正常的圖片：

我們來降低一下飽和度：

程式碼如下：

filter: sepia(1);
複製程式碼

效果如下：

我們再來提升一下飽和度：

程式碼如下：

filter: saturate(4);
複製程式碼

效果如下：

我們再來對每個畫素的色相進行指定角度進行偏移

程式碼如下：

filter: hue-rotate(295deg);
複製程式碼

以上三種濾鏡我們一起來使用：

filter: sepia(1) saturate(4) hue-rotate(295deg);
複製程式碼

效果如下：

這就是我們想要的效果（可能效果沒有原圖好哈，這裡只是說明一下這幾種濾鏡的作用），而且，此時你可能有個疑問，到底我該設定多少的飽和度，或者色相呢？這就涉及到我們的色彩模型，參考連結：HSL色彩模型

四：折角效果

首先，我們來看一下，比較常見的一個折角效果：

方案一：直接讓設計給一張背景

方案二：採用border去實現三角形，然後定位到右上角

方案三：採用漸變去實現

div {
    width: 300px;
    height: 200px;
    background: green;
    background:
            linear-gradient(to left bottom,
            transparent 50%, rgba(0,0,0,.4) 0)
            no-repeat 100% 0 / 2em 2em,
            linear-gradient(-135deg,
            transparent 1.5em, green 0);   
}
複製程式碼

效果如下：