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

頁面構建

1、邊框內圓角

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

邊框內圓角

#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。dom

box-shadow屬性有如下5個特性svg

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

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

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

spread-radius

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

2、條紋背景

如何使用CSS來實現條紋？url

CSS實現條紋

使用 linear-gradient 屬性實現spa

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

linear-gradient屬性實現

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

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

修改 linear-gradient 屬性

由於條紋是由 background-image 屬性生成的，所以固然也可使用 background-size 屬性來改變它的大小設計

background-size: 100% 40px;

使用 background-size 屬性

若是某個色標的位置值比整個列表中在它以前的色標的位置值都要小，則該色標的位置值會被設置爲它前面全部色標位置值的最大值。

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
);

3、平行四邊形和梯形

使用 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

4、陰影

投影首先會想到 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 參考規範】，能夠轉發朋友圈和你的朋友分享哦。

本文同步分享在博客「grain先森」（JianShu）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

Css 小技巧

1、邊框內圓角

2、條紋背景

3、平行四邊形和梯形

4、陰影