CSS3的使用方法解析

時間 2019-12-17

標籤 css3 css 使用方法解析欄目 CSS 简体版

原文原文鏈接

本身過去有段時間使用CSS3開發過一些小的部件和效果，可是因爲過久沒有再次去使用，致使當本身再次去使用的時候我就須要去翻手冊從新找一次而後按着方法使用才能夠。css

如今我就把這份CSS3的使用技巧展現給各位開發朋友們，但願對大家的使用有幫助。html

順帶，我會在後面把我整理的一整套CSS3，PHP,MYSQL的開發的筆記打包放到百度雲，有須要能夠直接去百度雲下載，這樣之後大家開發就能夠直接翻筆記不用百度搜那麼麻煩了。css3

筆記連接：http://pan.baidu.com/s/1qYdQdKK 密碼：pvj2web

1、css3背景與邊框相關樣式api

下面主要介紹了幾個CSS3函數的使用。函數

1.background-clip函數，用於背景圖的顯示位置。佈局

1.background-clip:
padding-box --->邊框之內有背景
content-box	只有內容行纔有背景
border-box 邊框一塊兒都有背景
注意：須要配合 padding 的時候纔有用

2.background-origin:
padding-box --->邊框之內有背景
content-box	只有內容行纔有背景
border-box 邊框一塊兒都有背景

主要是能夠加一張背景圖片，背景圖片左上角顯示（能夠設置顯示位置,前提是照片必須足夠小）

3.background-image:url(""),url(""); 
background-repeat:repeat-x,no-repeat;
background-position:100%,100%,center; (能夠設置圖片的顯示百分比位置)
主要用於顯示兩張背景圖片，而且第一張要小於第二張，這樣第一張圖片在第二張的上面。（可多張疊加）

注意：建議圖片爲透明的，不的話會有分界

4.border-radius:10px 10px 10px 10px;(分別角爲左 右 下右 下左)四個角
能夠設置邊框爲圓角

5.-webkit-border-image:url("")10 10 10 10;
用於對圖片進行拉伸，四個值依次意思爲：左 上 右 下（正方形的四邊來講）

2、CSS3動畫
CSS3動畫是CSS3的核心功能，這個是很經常使用的。並且也很重要。post

1.transition:background 1s linear,width 1s linear,height 1s linear,transform 1s linear;
（能夠對背景，其餘任意元素進行設置，過分時間，linear 線性）
注意：還須要配上僞類進行一塊兒實現漸變的效果
(屬性那裏能夠用all, all指的是全部屬性都賦予過渡效果)

也能夠分開寫：
transition-duration:1s;
transition-property:background,transform,width;
transition-timing-function:linear;

2.實現div顏色漸變的方法	
div{
animation:anima(這個是動畫名) 5s infinite alternate; /*infinite alternate 可不斷重複播放動畫*/
-webkit-animation:anima 5s infinite alternate;
}
@-webkit-keyframes mycolor{
0%{
background-color:blue;
}
35%{
background-color:green;
}
60%{
background-color:orange;
}
80%{
background-color:yellow;
}
100%{
background-color:aqua;
}
}
#div1:hover{
-webkit-animation:mycolor 10s linear;
}

3.實現圖片旋轉起來的效果	
@-webkit-keyframes mycolor{
0%{
background-color:blue;
transform:rotate(0deg);
}
35%{
background-color:green;
transform:rotate(30deg);
}
60%{
background-color:orange;
transform:rotate(60deg);
}
80%{
background-color:yellow;
transform:rotate(30deg);
}
100%{
background-color:aqua;
transform:rotate(-30deg);
}
}
#div1:hover{
-webkit-animation:mycolor 5s ease;
}

注意：這幾個是屬性值 linear ease-in(慢快) ease-out（慢慢） ease(慢快) ease-in-out （慢快慢）

4.CSS3分列的效果(能夠用來作圖片的瀑布流)
-webkit-column-count:2; /*分兩列*/
column-gap:50px;/* 間距 */
-webkit-column-gap:50px;/* 間距 */
column-rule:1px outset #ff0000;/* 間隔線設置 */
-webkit-column-rule:1px outset #ff0000;
column-width:250px;/* 設置列寬 */
-webkit-column-width:250px;

3、CSS3盒子相關樣式字體

這個CSS3的盒子樣式其實CSS也有，沒有太多區別。動畫

1.display  設置顯示的背景長度
	inline 顯示爲一條線，也就是元素多大就顯示多少
	inline-block和block同樣 顯示完這個div或span的長高	
	inline-table   只對table纔有用，可讓table上下的語句一條線顯示
	list-item 可讓div像列表那樣顯示
	
2.overflow
　　hidden 能夠隱藏多餘的
　　scroll 可讓多餘的不超出而後滾動看
	
　　overflow-x:hidden/scroll  讓水平的隱藏或是滾動查看

　　white-space:nowrap 水平顯示內容

3.box-shadow:10px 10px 10px #ccc;(分別對應 陰影左右偏移 上下偏移 模糊度 陰影顏色)

4.box-sizing:content-box/border-box;
     必定要和padding 使用纔會有變化  （content-box會讓box變大，border-box不會讓box變大）

4、CSS3文字與文字相關樣式

主要是對字體進行修飾和製做的方法。

1.text-shadow:5px 5px 5px red,
9px 13px 10px blue,
8px 12px 10px #ccc;
字體陰影面積顯示（同box-shadow）

2.本身設置字體
@font-face{
/* 能夠設置字體 */
font-family:WebFont;
/* ttf :0 otf:t */
src:url('ygyxsziti2.0.ttf')format("truetype");
}
div{
font-family:WebFont;
}

3.font-size-adjust:0.57; 設置同類字體顯示大小同樣

4.text-transform:
capitalize：
將每一個單詞的第一個字母轉換成大寫
uppercase：
將每一個單詞轉換成大寫
lowercase：
將每一個單詞轉換成小寫

5.white-space:
pre-wrap：
用等寬字體顯示預先格式化的文本，不合並文字間的空白距離，當文字碰到邊界時發生換行。
pre-line：
保持文本的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。

6.	writing-mode 書寫格式

-webkit-writing-mode:vertical-rl;
writing-mode:tb-rl;

horizontal-tb：
水平方向自上而下的書寫方式。即 left-right-top-bottom（相似IE私有值lr-tb）
vertical-rl：
垂直方向自右而左的書寫方式。即 top-bottom-right-left（相似IE私有值tb-rl）
vertical-lr：
垂直方向自左而右的書寫方式。即 top-bottom-left-right
lr-tb：
左-右，上-下。對象中的內容在水平方向上從左向右流入，後一行在前一行的下面。 全部的字形都是豎直向上的。這種佈局是羅馬語系使用的（IE）
tb-rl：
上-下，右-左。對象中的內容在垂直方向上從上向下流入，自右向左。後一豎行在前一豎行的左面。全角字符是豎直向上的，半角字符如拉丁字母或片假名順時針旋轉90度。這種佈局是東亞語系一般使用的（IE）

7.文本溢出
text-overflow:
clip：
當內聯內容溢出塊容器時，將溢出部分裁切掉。
ellipsis：
當內聯內容溢出塊容器時，將溢出部分替換爲（...）。

5、CSS3選擇器

所謂選擇器是對這一類的所有均可以進行選擇使用。

	1.通配選擇器
	[id*=div]{ /*只要id有div的均可以被改變顏色*/
		color:yellow;
	}  
	[id^=div]{ /*只要id開頭是div都被改變顏色*/
		color:green;
	}
	[id$=y]{ /*只要id開頭是y都被改變顏色*/
		color:red;
	}

	2.	div ~ p{
		color:red;
		}
	同級div下面的p標籤則被修改樣式
例：
	<div id="div1">
			示例1
		
			<div id="div2">
				<h1>示例2</h1>
					<p>fas</p>
					<p>fas</p>
					<p>fas</p>
			</div>
					<p>fas</p>
					<p>fas</p>
					<p>fas</p>
		</div>

	3.	能夠設置p標籤前面的首字母爲紅字
		p:first-letter{
			color:red;
		}
		也可讓li先後部份內容添加進去
		li:before{ 
			content:"這個是首部";
			color:blue;
		}
		li:after{
			content:"這裏是尾部了";
			color:green;
			font-size:13px;
		}

	4.	
	<!-- root根元素 -->
	:root{
			background:#ccc;
		}
	/* not 除了哪一個標籤沒有這個樣式*/
	div *:not(h1){
		color:red;
	}
	/* empty 空元素補充樣式*/
	:empty{
		background-color:yellow;
	}
	a:visited{color:blue;}
	/* target 找到對象而後顯示樣式*/
		:target{
			background-color:orange;
		}


	5.		/* first-child*/
		li:first-child{
			background:yellow;
		}
		/* last-child*/
		li:last-child{
			background:red;
		}
		/* nth-child(position) 根據子元素位置來選*/
		li:nth-child(3){
			background:green;
		}
		li:nth-last-child(2){
			background:blue;
		}
		li:nth-last-child(odd){
			/*設置爲奇數顯示顏色*/
			background:orange;
		}  
		li:nth-last-child(even){
			/*設置爲偶數顯示顏色*/
			background:green;
		}
		li:nth-last-child(even):hover{  /*還能夠加僞類*/
			/*設置爲偶數顯示顏色*/
			color:blue;
		}	

		注意：odd爲奇數 even爲偶數

	6.
	/* nth-of-type 只計算同類的第幾個 */
		h2:nth-of-type(odd){
			background-color:yellow;
		}
		h2:nth-of-type(even){
			background-color:red;
		}
		p:nth-last-of-type(odd){
			background-color:orange;
		}

	7.讓第幾行有樣式
	<!--
		nth-child(n)
		an+b
		意思是看你x列重複一次，則a爲x
		b則以此從0到n
	 -->
	/*	li:nth-child(5n+1){
			background-color:aqua;
		}
		li:nth-child(5n+2){
			background:#ccc;
		}
		li:nth-child(5n+3){
			background:orange;
		}
		li:nth-child(5n+4){
			background:blue;
		}
		li:nth-child(5n){
			background:red;
		}*/
		/*  only-child */
		li:nth-child(1){
				background-color: blue;
		}
		li:only-child{  
			/* 只有當ul li中只有li一個時候纔會顯示背景顏色*/
			background-color: red;
		}

	8.		
		/* hover,foucs,active */
	input[type="text"]:hover{
		background:yellow;
	}
	input[type="text"]:focus{/*focus是焦點的意思*/
		background:red; /*點擊會變色*/
	}
	input[type="text"]:active{
		background:blue;/*按住會變色*/
	}
	input[type="checkbox"]:checked{
		outline:2px solid blue; /*能夠有外邊框*/
	}
	/* enabled，disabled */
	input[type="text"]:enabled{
		background-color:gold;
	}
	input[type="text"]:disabled{
		/* 
			disabled 殘廢的，殘疾的
			enabled 激活的
		*/
		background-color:#666;
	}

6、CSS3中的變形處理

這個是很經常使用的對圖形進行修飾。

1.	
	/*旋轉 縮放 移動 傾斜*/
		/*旋轉
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		*/
		/* 縮放
			transform:scale(1,5);
			-webkit-transform:scale(1,5);
		*/
		/*傾斜
			transform:skew(30deg,30deg);
			-webkit-transform:skew(30deg,30deg);
		*/
		/*移動*/
			transform:translate(0px,250px);
			-webkit-transform:translate(0px,250px);
   示例:
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);

	2.圖形變換基準點
		transform-origin:right bottom;
	
	3.圖形變形處理能夠合在一塊兒寫
		transform:rotate(200deg) scale(2.5) skew(210deg,100deg);

7、僞類選擇符

這個僞類樣式很經常使用。

1.類型聚焦
		E:focus { sRules }
		input:focus{
		background: #f6f6f6;
		color: #f60;
		border: 1px solid #f60;
		outline: none;
		}

	2.除了這個沒有 其餘都有這個樣式
		E:not(s) { sRules }
		p:not(.abc) {
		color: #f00;
		}

	3.根屬性
		E:root { sRules }
		html:root .test {
		color: purple\0;
		}

8、CSS3顏色漸變效果

1.顏色漸變
	background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

示例:		
	background-image:-webkit-linear-gradient(
			rgba(41,41,41,0.75) 0%,
			rgba(54,54,54,0.72) 50%,
			rgba(24,23,23,0.94) 51%);

	2.顏色漸變屬性:
	background:-webkit-gradient(
		linear,left top,right bottom,from(#6cc3fe),to(#21A1D0));


小知識點:
		1.當須要對一些屬性進行隱藏的時候能夠用:overflow:hidden; 而後再對這個框用hover僞類進行設置left:0(隱藏前須要用到postion:absolute;left-width(對應的寬);)。而後就能夠用hover進行顯示內容框了。

		2.也能夠用display:none;(一開始讓它顯示的時候什麼屬性都沒有);
		  而後當鼠標放上去的時候把它變成塊 display:block;(而後就能夠經過僞類加一個 height:0(沒有高度就消失)等效果了。)


		3.關於用label標籤，能夠用for="相對應id" 控制某個元素,擁有一樣的css
		  而 ~ 可控制關聯div 擁有一樣的css樣式

		4.製做180度圖片旋轉換文字特效技巧：
			<div id="all">
				<div class="rotate"> 
					<img src="">
				<div class="wz">
					文字內容
				</div>
				</div>
			</div>

當要旋轉的時候:
	文字須要旋轉180度，
		rotate部分須要旋轉180，(須要過分效果還要用到transition)
			 樣式這樣寫: .con:hover .rotate{}

綜上的所有都是很經常使用的CSS3樣式修飾文本。其實CSS3能夠經過看手冊快速上手，因此很容易掌握。

筆記連接：http://pan.baidu.com/s/1qYdQdKK 密碼：pvj2