本週學習了一些CSS3的新特性 在此做出總結記錄。

1. background-clip

設定元素的背景（背景圖片或顏色）是否延伸到邊框下面
一般設定背景只會存在於content和padding這條屬性可以將背景衍生至邊框。

引數值

border-box：
背景延伸到邊框外沿（但是在邊框之下）。

padding-box:
邊框下面沒有背景，即背景延伸到內邊距外沿。

content-box:
背景裁剪到內容區 (content-box) 外沿。

//html
	<p>border-box</p>
	<div class="border"></div>
	<p>padding-box</p>
	<div class="padding"></div>
	<p>content-box</p>
	<div class="content"></div>
//css
div{
			width: 100px;
			height: 100px;
			border: 10px navy;
			border-style: dotted;
			margin: 10px;
			padding: 20px;
			background: black;
		}
		.border{
			background-clip: border-box;
		}
		.padding{
			background-clip: padding-box;
		}
		.content{
			background-clip: content-box;
		}

 

2.box-shadow

給邊框新增陰影
注：可以用逗號分隔而生成多個陰影。
通過偏移量可以設計出很多好看的圖案。

引數值

h-shadow：x軸方向的偏移量
v-shadow：y軸方向的偏移量
blur：模糊距離
spread：陰影尺寸
color：陰影的顏色 預設為透明的
inset：內陰影和外陰影

//html
<div class="test"></div>
//css
div{
			width: 200px;
			height: 200px;
			background-color: black;
			box-shadow: 10px 10px 5px red,
			-10px -10px 10px green;
		}
 

3.outline

outline （輪廓）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。區別於邊框。
注：輪廓線不會佔據空間。

引數值：

• outline-color 顏色
• outline-style 樣式
• outline-width 大小

//html
<div class="test"></div>
//css
div{
			width: 200px;
			height: 200px;
			background: red;
			outline: black solid 10px; //黑色的輪廓
		}

4.outline-offset

設定outline屬性的偏移量。當出現複數的時候會有神奇的事情就像下面的例子
（在調整屬性的時候可以多嘗試不同的正負數值）

引數值

• length ：偏移量
• inhert：規定應從父元素繼承 outline-offset 屬性的值。

//html 用outline-offset屬性畫一個小圖示
<div class="add"></div>
//css
.add{
			width: 50px;
			height: 50px;
			background-color: white;
			border: 1px solid black;
			border-radius: 100%;
			outline: 10px solid black;
			outline-offset: -27px;
			cursor: pointer;
		}

ps：outline和box-shadow是很神奇的屬性 合理的組合能夠畫出很多好看的的影象和簡單的實現某些看起來很複雜的影象。
參考連結：
https://segmentfault.com/a/1190000005340697
https://juejin.im/entry/58d4c4aa61ff4b0060522f1e
https://blog.csdn.net/liu_jiachen/article/details/78634457

5.linear-gradient

這是一個函式
建立一個表示兩種或多種顏色線性漸變。

引數值

• side-or-corner：描述漸線的起始點位置
• angle：用角度指定漸變的方向
• color-stop：用於指定漸變的起止顏色。

//html
<div class="test"></div>
//css
.test{
			width: 300px;
			height: 100px;
			background:linear-gradient(90deg,red,green);
			/*漸變旋轉90度*/
			background: linear-gradient(red,green);
			/*從紅色漸變為綠色*/
			background: linear-gradient(red 30%,green 50%,black 20%);
			/*半分比的合理控制*/
		}

6.transform

修改css視覺格式模型的座標空間
屬性：元素可以被旋轉 轉換 縮放 傾斜

引數值參考：

http://www.w3school.com.cn/cssref/pr_transform.asp

//html
	<div class="test"></div>
	<div class="test2"></div>
	<div class="test3"></div>
//css
.test{
			width: 100px;
			height: 100px;
			background: red;
			margin: 50px 50px;
			transform:rotate(45deg);
		}
		.test2{
			width: 100px;
			height:100px;
			margin: 100px 100px;
			background: green;
			transform: scale(1,1); /*以螢幕當前大小來計算*/
		}
		.test3{
			width: 100px;
			height: 100px;
			margin: 50px 50px;
			background: black;
			transform: skew(40deg);
		}

7 path-clip

建立一個只有元素的部分割槽域可以顯示的剪下區域,類似於ps裡面的剪下功能。
ps：這個屬性IE 不支援

引數

4個引數分別代表座標

//圓角效果
//html
<div class="test"></div>
//css
.test{
			width: 200px;
			height: 200px;
			background: red;
			clip-path: inset(0 0 0 0 round 10px);
		}

參考連結：
https://juejin.im/entry/59a6dab4f265da24976003d3