CSS高階進階

ngaiwe發表於2018-02-12
CSS

CSS揭祕—摘要

寫這篇文章主要原因是幫助愛看書愛學習而又嫌書中長篇大論太多從而不能堅持看完的碼農們做的精華摘要，並且也幫助自己做一個知識儲存。

此文章不包含《CSS揭祕》全部內容，只做摘要，提取出工作常用場景，如果想了解更多全面內容推薦閱讀此書。

簡介

這本書主要針對中高階進階的CSS開發者，認識更多特性和掌握更多好的方法，當然書中內容不乏簡單對於中高階CSS開發者，但是我認為一本書只要能學到不會的東西也算值了，不能要求他所講述的面面俱到，私下裡還需我們進一步探索。

第二章 背景與邊框

第一張引言就不在此訴說了，沒什麼用，直接乾貨。

  1. RGBA/HSLA

    • RGBA:紅、綠、藍、透明度
    • HSLA:色調、飽和度、亮度、透明度

    概念模糊可以檢視《CSS顏色手冊》

  2. 半透明邊框

    主要用到background-clip來改變背景繪畫區域

    Background-clip:border-box

    • border-box(預設):背景被裁剪到盒子模型範圍content+padding+border
    • padding-box:背景被剪裁到盒子模型範圍content+padding
    • Content-box:背景被剪裁到盒子模型範圍content

    盒子模型如果概念模糊，可以檢視我寫的另外一篇文章關於盒子模型的《盒子模型原理》

    具體核心程式碼如下：

    border:10px solid hsla(0,0%,100%,.5);
background:white;
background-clip:padding-box;
複製程式碼

  3. 多重邊框

    主要用到box-shadow陰影的第四個屬性擴張半徑

    Box-shadow:none

    • none(預設):無陰影
    • Length1:第1個長度值用來設定物件的陰影水平偏移值。可以為負值
    • Length2:第2個長度值用來設定物件的陰影垂直偏移值。可以為負值
    • Length3:如果提供了第3個長度值則用來設定物件的陰影模糊值。不允許負值
    • length4:如果提供了第4個長度值則用來設定物件的陰影外延值。可以為負值
    • Color:設定物件的陰影的顏色。

    具體核心程式碼如下：(注意:box-shadow擴張半徑是層層疊加，重合部分上一層覆蓋下一層。)

    background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 0 0 20px pink;
複製程式碼

  4. 靈活的背景定位

    主要解決css2.1中定位左下角並且距離邊框有偏移問題

    Background-position:概念模糊檢視《Background-position》

    具體程式碼如下：

    background:url("./IMG_3789.JPG") no-repeat #58a;
background-position: right 20px bottom 20px;
複製程式碼

    calc()函式可以完美在Background-position中完成上面效果(注意：加減號左右有空格)

    background:url("./IMG_3789.JPG") no-repeat #58a;
background-position: calc(100% - 20px) calc(100% - 20px);
複製程式碼

    Background-origin:設定Background-position的參考原點，可以讓背景圖位置從padding、border、content區域顯示《Background-origin》

  5. 連續的影象邊框

    主要原理是給兩個不同背景指定不同的background-clip

    程式碼如下：

    padding: 10px;
border: 15px solid transparent;
background: 
	linear-gradient(white,white),
	url('./IMG_3789.JPG');
background-size: cover;
background-clip: 
	padding-box,//為linear-gradient(white,white)指定剪裁區域
	border-box;//為url('./IMG_3789.JPG')指定剪裁區域
background-origin: border-box;//設定背景座標起始原點
複製程式碼

    信封效果，起始就是背景用的漸變來代替圖片，原理都一樣

    background: 
	linear-gradient(white,white),
	repeating-linear-gradient(-45deg,
		red 0,red 12.5%,transparent 0,transparent 25%,
		#58a 0, #58a 37.5%,transparent 0, transparent 50%);
複製程式碼

第三章 形狀

  1. 平行四邊形

    主要用到skew()變形，但是如果只做shew()其中文字也會同樣傾斜，需要偽類

    shew():概念模糊檢視《transform》

    程式碼如下：

    .box{
    position: relative;
    margin: 100px;
    width: 200px;
    height: 100px;
    z-index: 1;
    text-align: center;
    line-height: 100px;
}
.box::before{
    content: '';
    width: 200px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: #58a;
    transform: skewX(-45deg);
}
複製程式碼

  2. 菱形圖片

    主要是將上面所講菱形做旋轉rotate()，但是僅僅做完旋轉會得到一個八邊形，因為max-width的寬度100%被解析為.picture盒子的邊長，但是我們需要的是讓圖片最大寬度為對角線的寬度，因為對角線寬度為等腰三角形邊長，然後根據勾股定理是正方形邊長的√2≈1.414，所以用scale放大1.42倍

    程式碼如下：

    //HTML
<div class="picture">
    <img src="./IMG_3789.JPG">
</div>

//CSS
.picture{
    margin: 100px;
    width: 400px;
    transform: rotate(45deg);
    overflow: hidden;
}
.picture > img{
    max-width: 100%;
    transform: rotate(-45deg);
}
複製程式碼

    可以用clip-path方法代替上述方法，但是瀏覽器相容存在很大問題，如想了解請查閱《clip-path官方說明》

  3. 切角效果

    要完成如下圖所示效果，主要採用萬能漸變

cutTriangleOne

Line-gradient:概念模糊檢視[《Line-gradient》](http://www.css88.com/book/css/values/image/linear-gradient().htm)

程式碼如下:

```bash
.box{
    width: 500px;
    height: 300px;
    background: #58a;
    background: linear-gradient(-45deg,transparent 15px, #58a 0)
}
```

> 上面用法只針對於一個角，如果需要多個角，首先我們想到的是用兩個漸變，如下所示

```bash
background: 
    linear-gradient(-45deg,transparent 15px, #58a 0),
    linear-gradient(45deg,transparent 15px, #655 0);
```

> 但是此方法行不通，因為預設情況下，這兩層漸變都會填滿整個元素，會相互覆蓋。所以我們需要讓他們各自縮小，站整個元素一半面積，如下

```bash
background: 
    linear-gradient(-45deg,transparent 15px, #58a 0) right,
    linear-gradient(45deg,transparent 15px, #655 0) left;
background-size: 50% 100%;
```
複製程式碼

cutTriangleTest

> 如上圖所示，出現了漸變圖案平鋪了兩次，所以我們需要關閉background-repeat

```bash
background: 
    linear-gradient(-45deg,transparent 15px, #58a 0) right,
    linear-gradient(45deg,transparent 15px, #655 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
```
複製程式碼

cutTriangleTest2

> 根據上圖，不難知道如何實現，四個切角，具體程式碼如下

```bash
background: #58a;
background: 
    linear-gradient(135deg,transparent 15px, #58a 0) top left,
    linear-gradient(-135deg,transparent 15px, #58a 0) top right,
    linear-gradient(45deg,transparent 15px, #58a 0) bottom left,
    linear-gradient(-45deg,transparent 15px, #58a 0) bottom right;
background-size: 50% 50%;
background-repeat: no-repeat;
```

> 擴充：弧形切角，主要差別是用徑向漸變radial-gradient

radial-gradient:概念模糊檢視[《radial-gradient》](http://www.css88.com/book/css/values/image/radial-gradient().htm)

程式碼如下：

```bash
background: #58a;
background: 
    radial-gradient(circle at top left,transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right,transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right,transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left,transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
```
複製程式碼

cutTriangleTest3

  1. 梯形標籤頁 未完待續

部落格

魏燃技術部落格

有任何問題可留言或者傳送本人郵箱ngaiwe@126.com

相關文章