CSS3高級

時間 2019-11-11

標籤 css3 css 高級欄目 CSS 简体版

原文原文鏈接

1、學習目標css

2、box-sizing屬性java

語法：box-sizing: content-box|border-box|inheritcss3

box-sizing屬性的用法：web

box-sizing屬性能夠爲三個值之一：瀏覽器

content-box（default），border-box，padding-box。 css3動畫

1.content-box，border和padding不計算入width以內學習

2.padding-box，padding計算入width內動畫

3.border-box，border和padding計算入width以內spa

<style type="text/css">
	.content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
    }
    
    .padding-box{
        box-sizing:padding-box;
        -moz-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #186645;
        background: red;                
    }
    
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #3DA3EF;
        background: yellow;
    }
    
	</style>
	
  </head>
  
  <body>
  	<div class="content-box">

    </div>
    
    <div class="padding-box">
    
    </div>
    
    <div class="border-box">
    
    </div>
  
  </body>

實現效果：　　3d

因爲瀏覽器兼容性問題，可能會出現如下效果：

3、box-shadow（盒子陰影）

語法：box-shadow: h-shadow v-shadow blur spread color inset;

取值以下： <length> <length> <length>? <length>? || <color>：

陰影水平偏移值（可取正負值）；

陰影垂直偏移值（可取正負值）；

陰影模糊值；陰影顏色

-moz-, -webkit-, -o-這些都是瀏覽器前綴。

經常使用前綴和瀏覽器的對應關係以下：

Firefox: -moz-

Chrome, Safari: -webkit-

Opera: -o-

IE: -ms-

<body>
  	<img src="hh.png"></img>
  </body>

4、圓角屬性值

語法： border-radius: 1-4 length|% / 1-4length|%;

註釋：按此順序設置每一個 radii 的四個值。

若是省略 bottom-left，則與 top-right 相同。

若是省略 bottom-right，則與 top-left 相同。

若是省略 top-right，則與 top-left 相同。

border-top-left-radius 左上角

border-top-right-radius 右上角

border-bottom-right-radius 右下角

border-bottom-left-radius 左下角

案例：　

<body>
  <div></div>
  </body>

4、CSS3 2D變形

經過 CSS3 轉換，咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。

2D轉換的屬性名爲transform，使用方法爲transform:method(value)。

2D轉換方法有translate、scale、rotate、skew、matrix，還有基於這些分支出的translateX、scaleY等

CSS3 2D轉換詳解：

<style type="text/css">
 
.wrap  {

	position:absolute;
	left:50%;
	top:50%;
	transition: all 0.5s ease-in-out;
	width: 80px;
	background: red;
	color: pink;
	text-align: center;
	padding: 10px;
	border-radius: 6px;
	font-size: 18px;
}
	/* 平移 */
	.wrap:hover{transform:translate(20px,20px);}
	
	/* 旋轉 */
	.wrap:hover{transform:rotate(90deg);}
	
	/* 傾斜 */
	.wrap:hover{transform:skew(30deg,10deg);}
	
	/* 縮放 */
	.wrap:hover{transform:scale(1.2);}
	
	/* 組合 */
  	.wrap:hover{transform:scale(1.5) rotate(90deg);}
   
	</style>
	
  </head>
  
  <body>
  	
  		<div class="wrap"></div>
  
  </body>

5、css3過渡

CSS3過渡屬性:

<!-- 過渡  -->
	<style type="text/css">
		
	a{
	-webkit-transition:padding 1s ease-out,backgrond-color 2s linear;
	}
			
	a:hover{
	padding-left: 20px;
	background-color: pink;
}
			
	</style>

  </head>
  
  <body>
  		
  	<a href="#">魔鬼中的天使</a><br/>
  	<a href="#">魔鬼中的天使</a><br/>
  	<a href="#">魔鬼中的天使</a><br/>
  	
  </body>

6、css3動畫

動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。

您能夠改變任意多的樣式任意多的次數。請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

0% 是動畫的開始，100% 是動畫的完成。

css3動畫屬性：

<style type="text/css">
		
			div{
				position:absolute;top:50%;
				left:50%;overflow:hidden;
				width:300px;height:150px;
				margin:-75px 0 0 -150px;
				border:3px solid #eee;
				background:#e0e0e0;
			}
			
			.one{
				 opacity:0;
				 display: block;
				 font-weight: bold;
				 height: 50px;
				 -webkit-animation:ersha 5s ease-out;
				 
			 }
			 
			 .two{
				 opacity:0;
				 display: block;
				 font-weight: bold;
				 height: 50px;
				 -webkit-animation:doubi 5s ease-out 5s forwards;
				 
			 }
			 
			@-webkit-keyframes ersha{
			
				0%{opacity:0; transform:translate(0px)}
				10%{opacity:0.2; transform:translate(20px) }
				20%{opacity:0.4; transform:translate(40px)}
				100%{opacity:1; transform:translate(100px)}
			}
			
			@-webkit-keyframes doubi{
			
				0%{opacity:0; transform:translate(0px)}
				10%{opacity:0.2; transform:translate(20px) }
				20%{opacity:0.4; transform:translate(40px)}
				100%{opacity:1; transform:translate(100px)}
			}
			
			
	</style>

  </head>
  
  <body>
  		
  		<div>
  			<span class="one">我會移動，你信嗎，嘻嘻</span>
  			<span class="two">我會移動，你信嗎，嘿嘿</span>
  		</div>
  	
  </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。