在頁面構建中，能明顯提升頁面顯示質量的一些CSS小技巧。很多簡潔美觀的頁面表現，可以使用CSS3代碼即可實現，減少圖片的使用。

一、邊框內圓角

我們在設計例如按鈕等控件的時候，會遇到這樣的設計：只有內側有圓角，而邊框或者描邊的四個角還是保持直角的形狀，用以下代碼可以輕鬆的實現。

#wrapper {
    width: 200px;
    height: 80px;
    padding: 10px;
    background: rgb(255, 187, 51);
    #content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background: rgb(85, 136, 187);
        color: #fff;
        font-size: 14px;
        border-radius: 20px;
    }
}

這種解決方案需要使用到兩個 dom 元素，那麼如果只使用一個 dom 元素，應該怎麼實現？這裏需要用到 CSS 的兩個屬性： box-shadow 和 outline 屬性，具體屬性參見MDN。

box-shadow屬性有以下5個特性

<inset>
<offset-x> <offset-y>
<blur-radius>
<spread-radius>
<color>

這裏我們將使用第四個屬性 spread-radius 來填充效果當中的空白。同時利用 outline 的特性：描邊不跟隨邊框繪製的特點來實現（因爲不清楚這是不是一個bug，所以在將來的版本中可能會改變），具體代碼如下。

box-shadow: 0 0 0 10px rgb(255, 187, 51);
outline: 10px solid rgb(255, 187, 51);

這種實現方式，對於邊框的寬度和圓角的大小有一定的限制效果。僅當邊框寬度 w 與圓角半徑 r 存在 w ≥ (√2-1)r 關係時纔可實現.

二、條紋背景

如何使用CSS來實現條紋？

使用 linear-gradient 屬性實現

#stripe {
  width: 400px;
  height: 200px;
  background: linear-gradient(rgb(255, 187, 51), rgb(85, 136, 187));
}

嘗試修改 linear-gradient 屬性，當linear-gradient屬性

background: linear-gradient(rgb(255, 187, 51) 50%, rgb(85, 136, 187) 50%);

因爲條紋是由 background-image 屬性生成的，因此當然也可以使用 background-size 屬性來改變它的大小

background-size: 100% 40px;

如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小，則該色標的位置值會被設置爲它前面所有色標位置值的最大值。

background: linear-gradient(rgb(255, 187, 51) 60%, rgb(85, 136, 187) 0);

然後我們嘗試創建一個三色條紋以及垂直條紋

background: linear-gradient(
    rgb(255, 187, 51) 33.3%, 
    rgb(85, 136, 187) 0, 
    rgb(85, 136, 187) 66.6%, 
    rgb(170, 255, 0) 0
);

垂直條紋

background: linear-gradient(to right, rgb(255, 187, 51) 60%, rgb(85, 136, 187) 0);

默認值爲 to bottom ，可以設置 to right; to left 等

斜條紋

background: linear-gradient(45deg, 
    rgb(255, 187, 51) 25%, 
    rgb(85, 136, 187) 0, 
    rgb(85, 136, 187) 50%, 
    rgb(255, 187, 51) 0%, 
    rgb(255, 187, 51) 75%, 
    rgb(85, 136, 187) 0
);
background-size: 30px 30px;

爲了達到斜條紋等寬的視覺效果，需要運用到勾股定理來計算寬度。

background-size: 42px 42px;

介紹 linear-gradient 的升級版： repeating-linear-gradient，可以試着使用 linear-gradient 和 repeating-linear-gradient 實現同樣的60°斜條紋進行對比

background: linear-gradient(60deg,
    rgb(255, 187, 51), 
    rgb(255, 187, 51) 25%,
    rgb(85, 136, 187) 0, 
    rgb(85, 136, 187) 50%,
    rgb(255, 187, 51) 0, 
    rgb(255, 187, 51) 75%,
    rgb(85, 136, 187) 0, 
    rgb(85, 136, 187) 100%
);
background-size: 18px 31px;

background: repeating-linear-gradient(60deg,
    rgb(255, 187, 51), 
    rgb(255, 187, 51) 15px, 
    rgb(85, 136, 187) 0, 
    rgb(85, 136, 187) 30px
);

三、平行四邊形和梯形

使用 transform 屬性可以很輕鬆的創建一個平行四邊形

#content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 80px;
    background: rgb(85, 136, 187);
    color: #fff;
    font-size: 14px;
    transform: skewX(-30deg);
    span {
        transform: skewX(30deg);
    }
}

缺點：需要兩個元素、修改的話需要修改兩個地方。

如何使用一個元素就實現這樣的效果。

解決辦法：將平行四邊形的背景設置在僞元素上，對僞元素進行變形。

#content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 60px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: skewX(-30deg);
        background: rgb(85, 136, 187);
        z-index: -1;
    }
}

梯形的概念比平行四邊形更加寬泛，只需要兩條邊平行即可。梯形常用於標籤頁，之前常用僞元素方法來實現一個梯形。

.trapezoid {
    position: relative;
    left: 200px;
    width: 400px;
    height: 180px;
    background: rgb(85, 136, 170);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: rgb(255, 255, 255);

    &::before,
    &::after {
        content: '';
        position: absolute;
    }

    &::before {
        position: absolute;
        top: 0;
        left: -100px;
        width: 0;
        height: 0;
        border-top: 180px solid transparent;
        border-bottom: 0 solid transparent;
        border-right: 100px solid rgb(255, 187, 51);
    }

    &::after {
        position: absolute;
        top: 0;
        right: -240px;
        width: 0;
        height: 0;
        border-top: 180px solid transparent;
        border-bottom: 0 solid transparent;
        border-left: 240px solid rgb(255, 187, 51);
    }
}

缺點：

把兩個僞元素都使用了；
需要修改形狀時，需要修改的方過多；
不能給梯形加邊框、陰影；
不能設置成圓角梯形；

通過構造平行四邊形的思想，對矩形進行變形。但是這次不採用 2d 平面的變形，而是 3d 平面變形，通過視覺差來構造一個梯形。

這裏需要用到 transform 屬性3d變換特性：

perspective
rotate3d (rotateX rotateY rotateZ)
transform-origin
scale3d (scaleX scaleY scaleZ)

實現一個最簡單的梯形所需要的代碼只有以下一行：

transform: perspective(200px) rotateX(30deg);

與 2d 變換不同，3d 內部變形是不可逆的，因此與構造平行四邊形相似，我們也可以將圖形的變形放在僞元素上。

.trapezoid {
    position: relative;
    left: 200px;
    width: 400px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: rgb(255, 255, 255);
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgb(85, 136, 170);
        transform: perspective(200px) rotateX(30deg);
        z-index: -1;
    }
}

優化

修改 transform-origin 屬性，控制轉動軸

transform-origin: bottom;

通過 scale3d 屬性而非 padding 屬性來修正視覺大小，同時兼顧了優雅降級

transform: perspective(200px) rotateX(30deg) scaleY(2.25);

添加圓角、陰影、背景漸變

background: linear-gradient(to right, rgb(85, 136, 170), rgb(255, 187, 51));
border-top-right-radius: 60px;
border-top-left-radius: 60px;
box-shadow: 10px 10px 10px 1px rgba(85, 136, 170, .2);

改變 transform-origin 得到不同斜邊的梯形

transform: perspective(200px) rotateX(10deg);
transform-origin: left;

缺點
斜邊的角度依賴於元素的寬度。因此，當元素的內容長度不等時，想要得到斜度一致的梯形就不容易了。3d 變換具體實現原理參見 matrix3d

四、陰影

投影首先會想到 box-shadow 這個屬性，根據以上的介紹，我們可以輕鬆的做出一個元素的陰影

#shadow {
    width: 200px;
    height: 100px;
    background: rgb(255, 187, 51);
    box-shadow: 240px 120px 0 0 red;
}

那麼如何針對一張圖片實現其對應的陰影？在頁面的例如頭像顯示會遇到這種效果

這裏將會使用到CSS3裏面的 filter 屬性

#logo {
    position: relative;
    width: 200px;
    height: 200px;
    background: url('../img/logo.svg') no-repeat;
    &::after {
        content: '';
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../img/logo.svg') no-repeat;
        background-size: 100% 100%;
        filter: blur(10px)
    }
}

閱讀原文

看完文章，還有福利拿哦，往下看👇👇👇
感興趣的小夥伴可以在公號【grain先森】後臺回覆【190315】獲取【Css 參考規範】，可以轉發朋友圈和你的朋友分享哦。

Css 小技巧

一、邊框內圓角

二、條紋背景

三、平行四邊形和梯形

四、陰影

TDengine docker安裝方法

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

Navicat安裝與激活教程

函數默認值

前端技能自檢

微信小程序之圓形進度條

出行

三觀

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結