摘要：通過模糊來弱化背景和滾動提示使用兩層背景，控制交互式的圖片對比控件范圍輸入控件方式書中有很詳細的解答提醒自己要回顧。

css編碼技巧

半透明邊框
hsla

多重邊框
box-shadow outline

靈活的背景定位
background-position css3該屬性可以指定偏移量，////background-origin 指定背景圖片相對于哪一個角進行偏移，和padding搭配使用////calc()方法的使用，calc(100% - 偏移量) 搭配background-position使用

邊框內圓角
一個元素box-shadow outline 結合使用 注意： 大小問題，勾股定理////兩個元素可以通過背景色出效果

條紋背景

linear-gradient background-size 搭配使用////傾斜條紋使用repeating-lineat-gradient////靈活的同色系條紋，background和background-image搭配使用

復雜的背景圖案

（1）網格中的方格用background和background-image， background-size搭配使用，background-image中有多個line-gradient 以逗號分隔，搭配使用，/////

（2）類似于輔助線，background、background-image和background-size搭配使用

//////（3）波點 background和background-image， background-size、background-position 搭配使用，可以利用兩個疊加形成更好看的/////


(4)棋盤，使用三角形拼接形成

偽隨機背景

background和background-image， background-size搭配使用， 蟬原則，根據質數設置background-size,

連續的圖像邊框

兩種方法

上述方法可以衍生出“螞蟻行軍”

！！注意斜紋變虛線，理解background-position百分比的含義；

頂部邊框裁切

自適應的橢圓

半橢圓

四分之一橢圓

平行四邊形

這種情況內容也會被旋轉，不符合設計要求！
解決辦法： 使用偽元素

菱形圖片：

使用強大的clip-path屬性，點對應的連線就是變換的圖形；

切角效果

無弧形切角

弧形切角：

顏色比較突兀，為了明顯，有點丑哈哈！

內聯svg與border-image方案：
之后補充，
裁切路徑方案: 使用clip-path（）屬性；

梯形標簽頁

簡單的餅圖 css或者svg方法，更推薦svg方法

單側陰影 理解box-shadow的幾個參數的含義

鄰邊陰影
雙側陰影，以上陰影均利用四個值進行實現，并且可以有多個陰影，以逗號分隔；

不規則陰影： 解決有箭頭，虛線邊框，或者折角的圖形陰影。

使用filter: drop-shadow() 里面的參數和box-shadow一樣，只是沒有陰影尺寸和inset，且不能用逗號分開，filter: blur() grayscale() drop-shadow();濾鏡可以串聯使用；

染色效果 （圖片的飽和度變化）

基于濾鏡的方式：filter: sepia(1) saturate(4) hue-rotate(295deg);可以有動畫效果，
基于混合模式： mix-blendmode 可以為整個元素設置混合模式， background-blend-mode 可以為每層
背景多帶帶指定混合模式。 前者需要將圖片包裹在div中，向上包裹元素混合！后者需要將圖片作為背景圖片，向下背景元素混合，且無動畫效果！
三種方法各有利弊！

毛玻璃效果

使用偽元素和filter屬性完成

折角效果

使用偽元素和漸變完成，

連字符斷行 hyphens: auto;

插入換行： 使用偽元素的content: "A" 和white-space:pre; 搭配使用，

文本行的斑馬條紋：background-size: auto 3em;

background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%,
transparent 0);三者結合使用，單位設置為em，可以使條紋寬度隨著文字大小的變化而變化

調整tab的寬度： 利用tab-size屬性，用于解決展示代碼或者原樣輸出

連字：font-variant-ligatures: common-ligatures

no-discretionary-ligatures
no-historical-ligatures; 使用此屬性解決問題

華麗的& 符號：@font-face {

font-family: Ampersand;
src: local("Baskerville-Italic"),
local("GoudyOldStyleT-Italic"),
local("Palatino-Italic"),
local("BookAntiqua-Italic");
unicode-range: U+26;
}
h1 {
font-family: Ampersand, Helvetica, sans-serif;
}

自定義下劃線：

background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.15em;
text-shadow: .05em 0 white, -.05em 0 white;
使用此方法生成下劃線

現實中的文字效果：
凸版印刷效果：background: hsl(210, 13%, 60%);

color: hsl(210, 13%, 30%);
text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
空心字效果： 使用svg（推薦） 或者使用text-shadow
文字外發光效果：filter: blur(） 或 text-shadow
文字凸起效果： 陰影逐漸加深，用mixin設置
環形文字： 利用svg

選用合適的鼠標光標

擴大可點擊區域

自定義復選框

開關式按鈕，謹慎使用

通過陰影弱化背景，相當于添加蒙層，（1）使用偽元素，但是無法捕獲點擊事件，阻止鼠標交互（2）box-shadow;box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);不阻止鼠標交互，而且配合固定定位使用，或者在沒有滾動條的頁面中使用。(3)dialog::backdrop {

background: rgba(0, 0, 0, .8);
}

通過模糊來弱化背景：box-shadow和filter

滾動提示 ：使用兩層背景，控制

交互式的圖片對比控件：

范圍輸入控件方式：書中有很詳細的解答！提醒自己要回顧。

自適應布局 width: min-content

表格的自適應寬度 table {

table-layout: fixed;
width: 100%;
}

根據兄弟元素的數量來設置樣式： li:only-child {

/ 只有一個列表項時的樣式 /
}

根據兄弟元素的數量范圍來匹配元素： nth-child(2n+1)）；；n+b 這種形式的表達式可以選中從第 b 個

開始的所有子元素。 舉例來說， :nth-child(n+4) 將會選中除了第一、 二、
三個子元素之外的所有子元素

滿幅的背景，定寬的內容：footer {

padding: 1em;
padding: 1em calc(50% - 450px);
background: #333;
}三行代碼解決，calc()函數的用處真多！

垂直居中： （1）基于絕對定位的解決方法：main {

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} transfrom基于自身的寬高進行百分比計算
（2）基于視口單位，但有限，只能使用在視口中main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
（3） 基于flexBox解決方案，很推薦，body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
} flex和margin： auto;結合使用，并且上下和左右都會居中；；；或者使用main {
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
} 此中運用了justify-content屬性和align-items屬性

緊貼底部的頁腳 使用flex

# 第八章 過渡與動畫

緩動動畫

未完，兩天后會更新完全，有些地方也比較粗略，后期再看一遍的時候進行補全！