平凡前端之路_07.CSS3的視覺效果

CSS3的視覺效果

CSS3 新增圓角、盒子陰影、半透明、文字效果、漸變背景等視覺效果。

圓角 - border-radius

使用 CSS3 border-radius 屬性，可以給元素製作 “圓角”。

屬性	描述
border-top-left-radius	定義了左上角的圓角
border-top-right-radius	定義了右上角的圓角
border-bottom-right-radius	定義了右下角的圓角
border-bottom-left-radius	定義了左下角的圓角

/** border-radius 屬性所有四個邊角屬性的縮寫，可以有1到4個值（以左上方向逆時針）。 */
border-radius: [top-left] [top-right] [bottom-right] [bottom-left];
border-radius: [top-left] [top-right & bottom-left] [bottom-right];
border-radius: [top-left & bottom-right] [top-right & bottom-left];
border-radius: [all];

border- * - * -radius & border-radius 可能的值	描述
length	定義角的形狀。
%	使用%定義角的形狀。

/** border-*-*-radius 和border-radius可以指定水平半徑、垂直半徑的圓角程度 */
border-top-left-radius: 15px 50px; 
border-radius: 15px / 50px;
/**
第一個值是水平半徑，第二個是垂直半徑。如果省略第二個值，第二個值複製第一個的值。

水平半徑的百分比是指邊框的寬度的百分比，而垂直半徑的百分比是指邊框的高度的百分比。
*/
border-radius: 15px / 50px;
/**等價於*/
border-radius: 15px 15px 15px 15px / 50px 50px 50px 50px;

border-radius 可以通過8個數值，任意指定任意角的水平半徑和垂直半徑。

---

盒子陰影 - box-shadow

使用 CSS3 box-shadow 屬性，可以給元素添加一個或多個陰影。

box-shadow: offset-x offset-y [blur-radius] [spread-radius] [color] [inset];

陰影並不佔據空間，不影響佈局。

多個陰影以逗號分隔，第一個陰影在最上面。

borer-radius圓角會影響元素陰影。

值	描述
offset-x	必需的。X軸陰影偏移量。允許負值。
offset-y	必需的。Y軸陰影偏移量。允許負值。
blur-radius	可選。陰影模糊半徑。只能是正值。
spread-radius	可選。陰影擴展。允許負值。
color	可選。陰影顏色。
inset	可選。投影方式。從外層陰影（默認）改變爲內側陰影。

inset 可以寫在參數的第一個或最後一個，其它位置是無效的。

外陰影會在元素背景之下，內陰影會在邊框之下背景之上。

當設置內陰影（inset）時，x-offset水平偏移量爲負值時，方向是右側，爲正值時，方向是左側；y-offset垂直偏移量爲負值時，方向是底部，爲正值時，方向是頂部。

---

半透明 - opacity

使用 CSS3 opacity 屬性，可以給元素添加透明度。

opacity值	描述
number	指定不透明度。從0.0（完全透明）到1.0（完全不透明）

約束在[ 0.0 - 1.0 ]範圍內，如果超過了這個範圍，其計算結果將截取到與之最相近的值。

/*兼容與支持*/
eg:
.E{
	filter:alpha(opacity=50);  	/* IE8 and earlier */
	-khtml-opacity: 0.5;  		/* earlier Safari */
	  -moz-opacity: 0.5;  		/* earlier Mozilla */
		   opacity: 0.5;
}

文字效果

文字陰影 - text-shadow

使用 CSS3 text-shadow 屬性，可以給文字添加一個或多個陰影。

text-shadow: offset-x offset-y [blur-radius] [color];

陰影並不佔據空間，不影響佈局。

多個陰影以逗號分隔，第一個陰影在最上面。

text-shadow可能的值	描述
offset-x	必需的。X軸陰影偏移量。允許負值。
offset-y	必需的。Y軸陰影偏移量。允許負值。
blur-radius	可選。陰影模糊半徑。只能是正值。
color	可選。陰影顏色。

文字溢出 - text-overflow

使用 CSS3 text-overflow 屬性，可以指定如何顯示文本溢出內容。

text-overflow可能的值	描述
clip	修剪文本。
ellipsis	顯示省略符號來代表被修剪的文本。
string	使用給定的字符串來代表被修剪的文本。只在 Firefox 下有效.

/** 單行文本溢出修剪*/
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/** 多行文本溢出修剪，2， 3， 4*/
.text-multi-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*2， 3， 4*/
  -webkit-box-orient: vertical;
}

---

漸變背景

使用 CSS3 漸變 gradients，可以讓兩個或多個指定的顏色之間顯示漸變的過渡。

漸變 - gradient 是數據類型，是一種特別的image數據類型。可以使用background-image、border-image設置，可疊加設置多個；

CSS3 定義了兩種類型的漸變 - gradients。

線性漸變 - linear-gradient

線性漸變由方向定義漸變軸，必須至少定義兩種顏色結點，纔有顏色漸變過渡效果。

background-image: linear-gradient([direction], [color-stop1], [color-stop2], ...);          

值	描述
direction	用角度值指定漸變的方向（或角度）。
color-stop1, color-stop2,…	用於指定漸變的起止顏色。

direction可能的值	[標準]	[-webkit-]	[-moz-] [-o-]
從下到上	to top	bottom	top
從上到下	to bottom	top	bottom
從左到右	to right	left	right
從右到左	to left	right	left
從右上到左下	to bottom left	top right	bottom left
從左下到右上	to top right	bottom left	top right

/* 兼容與支持 */
eg:
 	background-image: -webkit-linear-gradient(left, red , yellow); /* Safari 5.1 - 6.0 */
 	background-image: 	 -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 - 15 */
    background-image: 	   -o-linear-gradient(right, red, yellow); /* Opera 11.1 - 12.0 */
    background-image: 		  linear-gradient(to right, red , yellow); 

direction使用角度	[標準]	[-webkit-] [-moz-] [-o-]
從下到上	0 deg	90deg
從上到下	180deg	-90deg / 270deg
從左到右	90deg	0deg
從右到左	-90deg / 270deg	180deg
從右上到左下	-135deg / 225deg	-135deg / 225deg
從左下到右上	45deg	45deg

/* 兼容與支持 */
eg:
 	background-image: -webkit-linear-gradient(0deg, red , yellow); /* Safari 5.1 - 6.0 */
 	background-image: 	 -moz-linear-gradient(0deg, red, yellow); /* Firefox 3.6 - 15 */
    background-image: 	   -o-linear-gradient(0deg, red, yellow); /* Opera 11.1 - 12.0 */
    background-image: 		  linear-gradient(90deg, red, yellow); 

色標 (color-stop)

由一個color值組成，並且可以跟隨着一個可選的終點位置——可以是一個百分比值或者是沿着漸變軸的length。

eg:
	background-image: linear-gradient(to right, red 10%, yellow 120px); 
	/**從左到右漸變，紅色從最左邊到10%停止，從10%到120px，紅色到黃色漸變，黃色從120px到最右邊停止*/

未設置位置時默認情況下顏色均勻分佈。

如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小, 則該色標的位置值會被設置爲它前面所有色標位置值的最大值。

重複的線性漸變 - repeating-linear-gradient

eg:
	background-image: repeating-linear-gradient(to right, red 20%, yellow 80%);
	/*從左到右漸變，紅色從20%到黃色80%漸變，沿着漸變軸正負方向重複*/

	background-image: repeating-linear-gradient(to right, red, red 20%, yellow 80%, yellow 100%);
	/*等價於*/
	background-image: linear-gradient(to right, red 20%, yellow 80%); 
	/**從左到右漸變，紅色從最左邊到20%停止，從20%到80%，紅色到黃色漸變，黃色從80%到最右邊停止，重複*/

徑向漸變 - radial-gradient

徑向漸變由中心定義漸變軸。必須至少定義兩種顏色結點，纔有顏色漸變過渡效果。可以指定漸變的中心、形狀、大小。

background-image: radial-gradient([position] [shape] [size], color-stop1, color-stop2, ...);  

position可能的值	描述
center（默認）	設置中間爲徑向漸變圓心。
top	設置頂部爲徑向漸變圓心。
bottom	設置底部爲徑向漸變圓心。

shape可能的值	描述
ellipse (默認)	指定橢圓形的徑向漸變。
circle	指定圓形的徑向漸變

size可能的值	描述
farthest-corner (默認)	指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角。
closest-side	指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊。
closest-corner	指定徑向漸變的半徑長度爲從圓心到離圓心最近的角。
farthest-side	指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊。

radial-gradient的color-stop的可選的終點位置不允許負值。

重複的徑向漸變 - repeating-radial-gradient

eg:
	background-image: repeating-radial-gradient(red 20%, yellow 80%);
	/*中間爲徑向漸變圓心，紅色從20%到黃色80%漸變，沿着漸變軸正負方向重複*/

CSS 知識題

題目	答案
css常用長度單位	px(pixel)、em、rem(root em)、vw(viewpoint width)、vh(viewpoint height)、vmin、vmax、pt(point)。
當max-width在比width小，元素的寬度	元素的寬度值爲 max-width，不論 !important 。
line-height:1.5和line-height:150%的區別	當父子繼承時有區別–line-height設置:1.5會直接繼承給子元素即子元素line-height:1.5,設置150%則是計算line-height,將值繼承給子元素即子元素line-height不爲150%，而是一個計算好的值。
文字兩邊對齊	text-align: justify;
改變 input 焦點光標的顏色	caret-color:red / color: red;/ E{color: red} E::first-line{color: blue }
選擇5-10的子元素	E:nth-child(n+5):nth-child(-n+10) {}
設置鼠標指針事件的屬性	pointer-events
設置鼠標指針顯示的類型、形狀	cursor
設置文檔中被選中高亮部分設置樣式	E::selection{}
背景對半顏色	background: linear-gradient(to left, red 50%, white 50%);