前言
學什么不是學！貴在堅持啊喂！在學習前端其他知識前好好打基礎啊哈哈哈哈哈哈。所以挖了新坑看這本書爭取在兩星期看完并做這些筆記。主要是對css的變換形式地應用，看了第一章就根本停不下來啊！css還能這么用從來沒想到??！哈哈哈哈哈哈學習的樂趣就在這里吧大概。
1.陰影和邊框
如上圖若我們想實現這樣一個類似多重邊框的效果顯然用光用border是不夠的，在書上提供的方法時使用
box-shadow屬性中第四個參數：陰影的大小，當我們的陰影不偏移不設置模糊值同時卻增加陰影的大小即可形成邊框的效果，而最重要的一點是可以設置多重陰影，后設置的陰影會被覆蓋所以設置不同大小的陰影就能達到多重邊框的效果。
.border_test {
height: 100px;
width: 100px;
margin: 20px 40px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
}
而有時候我們只是需要在盒子外面描邊但又希望描邊出現在盒子的里面的時候可以使用outline屬性配合outline-offset達到以下的效果，特別提醒的是outline-offset這個屬性可以為負值來調整描邊的位置：
.outline_test {
height: 100px;
width: 100px;
background: yellowgreen;
outline: 2px dashed deeppink;
outline-offset: -10px;
}
2.背景
個人認為十分的復雜，所以學習的時間也花了很多。
在最開始要記錄的屬性：
background-origin:[border-box | padding-box | content-box] :接收的三個參數的意義是背景圖像（或漸變這些背景的東西）從哪里開始繪制（放置）。
**background-clip : **表示背景圖案可以 出現 在哪些地方（相當于剪裁）
這兩個元素放在一起使用大概就是先把背景放對位置再對背景進行剪裁。
**background-position : **在設置過background-origin屬性后若不設置此屬性默認從左上角開始繪制背景，可以通過簡單的設置該屬性達到控制背景位置的功能：
background-position: right 10px bottom 10px;(在這里有個相對于誰的right和相對于誰的bottom的問題是依賴于background-origin這個屬性的)
提醒一點，在實驗過程中出現只有將background-origin屬性寫在background-position后面才起作用的情況需注意
background-image參數：
none：無背景圖。
< url >：使用絕對或相對地址指定背景圖像。
< linear-gradient>：使用線性漸變創建背景圖像。（CSS3）
< radial-gradient>：使用徑向(放射性)漸變創建背景圖像。（CSS3）
< repeating-linear-gradient>：使用重復的線性漸變創建背景圖像。（CSS3）
< repeating-radial-gradient>：使用重復的徑向(放射性)漸變創建背景圖像。（CSS3）
對以上幾個屬性的理解是來自自己的見解如果有其他人看見有錯誤煩請口下留情，同時謝謝提出錯誤！！！
然后?。。。。?！
就是到這一章最難最好玩的地方了啊喂！光是想想要記錄這么多種東西都好累啊哈哈哈哈哈哈哈哈！但是還是要記啊哈哈哈哈哈哈OTLL。以下才是正文
關于漸變提前說一點自己對漸變參數的理解以線性漸變為例：
.gradient_test {
width: 100px;
height: 106px;
margin: 10px 10px;
background: linear-gradient(to right,#fb3 30%,#58a 60%);
}
效果如下圖：
左邊開始30%都是#fb3,30%-60%是#fb3漸變過度到#58a剩下40%都是#58a。
那如果過渡的距離無限地被縮小會，當代碼變成這樣：
background: linear-gradient(to right,#fb3 30%,#58a 30%);結果是不存在過渡區域而是直接從#fb3變為#58a就得到了這樣的條紋背景：
為了簡化代碼呢，如果漸變的終點的值為0或者是比起點小，自動變為起點的值：
上述代碼可以簡寫為：
background: linear-gradient(to right,#fb3 30%,#58a 0);
最后說的是background-size：
當我們同時設置了個漸變作為background-image的值時，可以分別為其設置size屬性和位置屬性以方便我們控制背景的圖案。
臨近結尾
以上是我在實驗打代碼時想不通和遇到的問題，剩下的只是普通的應用了，歸根結底還是自己多看看代碼多打打，多體會每個屬性自然就加深了理解，最后貼上不同代碼帶來的不同背景。
.alpha {
width: 90px;
height: 90px;
margin: 10px 10px;
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,100%,100%,.1) 15px,
transparent 0, transparent 30px);
}
//利用了透明度
.more1 {
width: 90px;
height: 90px;
margin: 10px 10px;
background: white;
background-image: linear-gradient(90deg,
rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(
rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
}
.more2 {
width: 90px;
height: 90px;
margin: 10px 10px;
background: #58a;
background-image:
linear-gradient(transparent 29px, white 0%),
linear-gradient(to right, transparent 29px, white 0%);
background-size: 30px 30px;
}
.more3 {
width: 90px;
height: 90px;
margin: 10px 10px;
background: #58a;
background-image:
linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,transparent 0);
background-size: 75px 75px,75px 75px,15px 15px,15px 15px;
}
.polka {
width: 90px;
height: 90px;
background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
.chess {
width: 90px;
height: 90px;
margin: 10px 10px;
background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0,transparent 75%,#bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0,transparent 75%,#bbb 0);
background-position: 15px 15px,0 0;
background-size: 30px 30px;
}
//那從棋盤和斑點這兩幅背景中可以看出對于重復的東西總結規律十分重要啊!
//核心的思想是利用background可以設置多層且疊加的機制配合background-origin和background-clip剪裁出效果
.backggg {
width: 180px;
height: 83px;
border: 10px dashed transparent;
padding: 10px;
background:
linear-gradient(white,white),
url(backimg.png);
background-origin: border-box;
background-clip: content-box,border-box;
}
后記
武裝自己的應該是知識而不是一身廢銅爛鐵
我大乞求者說的話十分有道理啊哈哈哈哈哈哈。
學習這件事從小到大沒斷過，以前還會想著法偷懶，現在卻是不太敢了，認認真真踏踏實實比什么都來得重要。
