重溫CSS3常見新特性的奧祕（我的總結）

時間  2020-03-18
標籤 重溫 css3 css 常見 特性 奧祕 我的 總結 欄目 CSS 简体版
原文   原文鏈接

最近以爲CSS3真的很神奇，徹底掌握了用的時候真的很是有趣，可是就是用的時候很難用好，因此我就整理了一下關於CSS3的新特性，也方便本身查閱，要是文章中有什麼不對的或者更好的方法，歡迎你們指出~javascript

transition - 過渡

經過過渡transition，能夠使開發者不須要javascript就能夠實現簡單的動畫交互效果。css

語法html

transition: property duration timing-function delay;
複製代碼

屬性值和描述前端

實例-過渡

從初始狀態過渡到終止狀態時速度由快到慢，運動時間2s，1s後開始執行 

div
{
	width:80px;
	height:80px;
	background:rgb(18, 185, 121);
	transition:width 2s ease 1s;
	-webkit-transition:width 2s ease 1s; 
}

div:hover
{
	width:200px;
}
複製代碼

實例-hover效果

你們能夠看出左邊的按鈕運動時間用了3秒，右邊鼠標放上去顏色就出來了，這就是左邊用了過渡，右邊沒有用過渡的效果

代碼以下：java

css代碼css3

button{
	width:100px;
	height:70px;
	border-radius: 10%;
	color: forestgreen;
}
.one{
	transition: all 3s;
}
button:hover
{
	background:rgb(218, 118, 4);
}
複製代碼

html代碼web

<div>
	<button class="one">Monday</button>
	<button class="two">Tuesday</button>
</div>
複製代碼

實例-過渡旋轉

css代碼瀏覽器

.box {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(rgb(105, 103, 204),rgb(226, 40, 26),rgb(106, 177, 85));
	  transition: all 3s;
}
.box:hover {
    transform: rotate(180deg) scale(.5, .5);
		background: -webkit-radial-gradient(rgb(218, 44, 116),rgb(45, 47, 207),rgb(201, 128, 19));
}
複製代碼

html代碼bash

<div class="box"></div>
複製代碼

animation - 動畫

語法markdown

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
複製代碼

屬性和值的描述

實例-動畫

上面的動畫採用的漸變的背景，動畫5s完成，鼠標放在上邊動畫就暫停 

.box {
  background: -webkit-radial-gradient(rgb(211, 28, 43),rgb(130, 190, 111),rgba(228, 184, 42, 0.425));
  height: 120px;
  width: 120px;
  position:relative;
  animation: change 5s infinite;
}
.box:hover {
  animation-play-state: paused;
}
@keyframes change
{
	from {left:0px;}
	to {left:200px;}
}
複製代碼

實例-不一樣時間點動畫

裏面的10%，50%，70%，100%表明在變化中不一樣時間點的屬性值 

.box {
    height: 120px;
    width: 120px;
	  position:relative;
    animation: change 2s linear 2s infinite reverse running both;
}
.box:hover {
    animation-play-state: paused;
}
@keyframes change {
   0% {
      height: 150px;
		  background: -webkit-radial-gradient(rgb(44, 218, 111),rgb(130, 190, 111),rgba(230, 37, 172, 0.425));
   }
   50% {
      width: 80px;
   }
   70% {
      width: 200px;
      height: 200px;
   }
   100% {
      width: 100px;
      height: 100px;
		background: -webkit-radial-gradient(rgb(218, 64, 44),rgb(45, 207, 118),rgb(201, 128, 19));
   }
}
複製代碼

shadow - 陰影

語法

box-shadow: h-shadow v-shadow blur spread color inset
複製代碼

屬性和值的描述

實例-div陰影

div
{
	width:300px;
	height:100px;
	background-color:rgb(75, 179, 75);
	box-shadow: 15px 15px 10px #888888;
}
複製代碼

實例-圖片陰影

<style>
	.pic img
		{
			width:300px;
			height:200px;
			margin-right:30px;
		}
	.onepic{
		box-shadow: 15px 15px 10px #748ab8;
	}
	.twopic{
		box-shadow:  15px 15px 10px #944848;
	}
  </style>
  
  
  <div class="pic">
	<img src="./three.jpg" class="onepic"/>
	<img src="./four.jpg" class="twopic"/>
  </div>
複製代碼

transform - 轉換

語法

transform: none|transform-functions
複製代碼

屬性和值的描述

實例-2D旋轉

.pic img{
		width:200px;
		height:100px;
		transform:rotate(15deg);
		margin: 60px;
    }
    
    <div class="pic">
         <img src="./five.jpg" class="onepic"/>
    </div>
複製代碼

實例-2D傾斜

.pic img{
		width:200px;
		height:100px;
		transform: skew(10deg,10deg);
		margin: 60px;
    }
    
  <div class="pic">
	<img src="./five.jpg" class="onepic"/>
  </div>
複製代碼

實例-3D旋轉

.pic img{
		width:200px;
		height:100px;
		margin: 60px;
    }
	.pic:hover{
		transform:rotateX(180deg);
	}
	
    <div class="pic">
        <img src="./five.jpg" class="onepic"/>
    </div>
複製代碼

實例-3D旋轉

.pic img{
		width:200px;
		height:100px;
		margin: 60px;
		transform:rotate3d(10,10,10,60deg);
    }
    
  <div class="pic">
	<img src="./five.jpg" class="onepic"/>
  </div>
複製代碼

transform-origin

語法

transform-origin: x-axis y-axis z-axis
複製代碼

屬性和值的描述

實例-設置旋轉基點位置

.pic
		{
			position: relative;
			height: 200px;
			width: 200px;
			margin: 100px;
			padding:10px;
			border: 1px solid rgb(201, 134, 46);
		}
		.pic2
		{
			padding:50px;
			position: absolute;
			background-image: url("./four.jpg");
			transform: rotate(45deg);
			transform-origin:20% 40%;
		}
		
		
    <div class="pic">
        <div class="pic2">hello</div>
    </div>
複製代碼

transform-style

語法

transform-style: flat|preserve-3d
複製代碼

屬性和值的描述

實例-子元素3D轉換

#div1
		{
			position: relative;
			height: 200px;
			width: 200px;
			margin: 100px;
			padding:10px;
			border: 1px solid rgb(197, 139, 32);
		}
	#div2
		{
			padding:50px;
			position: absolute;
			background-image: url("./four.jpg");
			transform: rotateY(60deg);
			transform-style: preserve-3d;
		}

		#div3
		{
			padding:40px;
			position: absolute;
			background-image: url("./six.jpg");
			transform: rotateY(-50deg);
			box-shadow:  15px 15px 10px #944848;
		}
		
 <div id="div1">
	<div id="div2">HELLO
		<div id="div3">HAPPY</div>
	</div>
  </div>
複製代碼

background背景

語法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit
複製代碼

屬性和值的描述

實例-背景圖片

Css

.box{
		display: flex;
		justify-content: center;
	·}
	 .box1{
		 text-align: center;
		 width: 300px;
		 height: 250px;
		 background-image: url("./six.jpg");
	 }
	 .box2{
		 text-align: center;
		 width: 300px;
		 height: 250px;
		 background-image: url("./sun.png");
	 }
複製代碼

html

<div class="box">
	<div class="box1">
		<p>I love the sea</p>
		<p>I feel very happy</p>
	</div>
	<div class="box2">
		<p>I like the sun</p>
		<p>I feel very happy</p>
	</div>
</div>
複製代碼

border-image邊框圖片

語法

border-image: source slice width outset repeat|initial|inherit
複製代碼

屬性和值的描述

實例-邊框

css

.box{
		border: 10px solid transparent;
		padding: 15px;   
		border-image: url(./border.jpg);
		border-image-slice: 30;
		border-image-repeat: repeat;
		border-image-outset: 0;
	}
複製代碼

html

<div class="box"></div>
複製代碼

Flex佈局

兩欄佈局

css部分

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 200px;
   /* flex-grow: 0;
      flex-shrink:0;
      flex-basis:200px; */
}
.outer2 .right {
   flex: auto;
}
複製代碼

html部分

<div class="outer outer2">
  <div class="left">2-left</div>
  <div class="right">2-right</div>
</div>
複製代碼

效果圖：

三欄佈局

css部分

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 100px;
}
.outer2 .middle {
   flex: auto;
}
.outer2 .right {
   flex: 0 0 200px;
}
複製代碼

html部分

<div class="outer outer2">
  <div class="left">2-left</div>
  <div class="middle">2-middle</div>
  <div class="right">2-right</div>
</div>
複製代碼

效果圖：

聖盃佈局

css部分

header, footer {
   height: 100px;
   width: 100%;
   background-color: antiquewhite;
}
.container {
   height: 200px;
   padding-left: 200px;
   padding-right: 300px;
}
.container > div {
   float: left;
   position: relative;
   height: 100%;
}
.left {
   width: 200px;
   height: 200px;
   background-color: burlywood;
   margin-left: -100%;
   left: -200px;
}
.right {
   width: 300px;
   height: 200px;
   background-color: burlywood;
   margin-left: -300px;
   right: -300px;
}
.middle {
   width: 100%;
   height: 200px;
   background-color: #b0f9c2;
}
複製代碼

html部分

<header>header</header>
    <div class="container">
      <div class="middle">midlle</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
<footer>footer</footer>
複製代碼

效果圖：

Filter - 濾鏡

CSS3 Filter（濾鏡）屬性提供了提供模糊和改變元素顏色的功能。CSS3 Fitler 經常使用於調整圖像的渲染、背景或邊框顯示效果。

實例-原圖

css部分

.box {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.box img {
   width: 300px;
   height: 300px;
   -webkit-filter: none;
   filter: none;
}
複製代碼

html部分

<div class="box">
   <p>原圖</p>
   <img src="./timg.gif"/>
</div>
複製代碼

效果圖：

實例-模糊

css修改

-webkit-filter: blur(5px);
filter: blur(5px);
複製代碼

效果圖：

實例-灰度

css修改

-webkit-filter: grayscale(1);
filter: grayscale(1);
複製代碼

效果圖：

實例-亮度

css修改

-webkit-filter: brightness(1.5);
filter: brightness(1.5);
複製代碼

效果圖：

實例-對比度

css修改

-webkit-filter: contrast(2.4);
filter: contrast(2.4);
複製代碼

效果圖：

實例-飽和度

css修改

-webkit-filter: saturate(1.6);
filter: saturate(1.6);
複製代碼

效果圖：

實例-色相旋轉

css修改

-webkit-filter: hue-rotate(160deg);
filter: hue-rotate(160deg);
複製代碼

效果圖：

實例-反色

css修改

-webkit-filter: invert(1);
filter: invert(1);
複製代碼

效果圖：

實例-陰影

css修改

-webkit-filter: drop-shadow(0px 0px 5px #000);
filter: drop-shadow(0px 0px 5px #000);
複製代碼

效果圖：

實例-透明度

css修改

-webkit-filter: opacity(75%);
filter: opacity(75%);
複製代碼

效果圖：

實例-褐色

css修改

-webkit-filter: sepia(0.77);
filter: sepia(0.77);
複製代碼

效果圖：

邊框

實例-圓角

css部分

#radius {
    border: 2px solid #a1a1a1;
    padding: 10px 40px; 
    background: #dddddd;
    width: 300px;
    border-radius: 25px;
}
複製代碼

html部分

<div id="radius">建立盒子邊框圓角建立盒子邊框圓角建立盒子邊框圓角建立盒子邊框圓角</div>
複製代碼

效果圖：

實例-盒陰影

css部分

#shadow {
    width: 200px;
    height: 200px;
    background-color:yellow;
    box-shadow: 10px 10px 5px #888888;
}
複製代碼

html部分

<div id="shadow"></div>
複製代碼

效果圖：

實例-邊界圖片

css部分

#round {
   -webkit-border-image: url('./border.png') 30 30 round; /* Safari 5 and older */
   -o-border-image: url('./border.png') 30 30 round; /* Opera */
   border-image: url('./border.png') 30 30 round;
}
複製代碼

html部分

<div id="round">這裏，圖像平鋪（重複）來填充該區域。</div>
複製代碼

效果圖：

線性漸變 Linear Gradient

語法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
複製代碼

實例-從上到下

從上到下（默認狀況下）

// css
.grad1 {
    height: 200px;
    width: 200px;
    background-color: red; /* 瀏覽器不支持時顯示 */
    background-image: linear-gradient(#2A8BBE, #FE280E);
}

// html
<div class="grad1"></div>
複製代碼

實例-從左到右

// css
.grad2 {
    height: 200px;
    width: 200px;
    background-color: red; /* 瀏覽器不支持時顯示 */
    background-image: linear-gradient(to right, #2A8BBE, #FE280E);
}

// html
<div class="grad2"></div>
複製代碼

實例-對角

// css
.grad3 {
     height: 200px;
     width: 200px;
     background-color: red; /* 瀏覽器不支持時顯示 */
     background-image: linear-gradient(to bottom right, blue, #FE280E);
}

// html
<div class="grad3"></div>
複製代碼

實例-定義角度

若是你想要在漸變的方向上作更多的控制，你能夠定義一個角度。角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將建立一個從下到上的漸變，90deg 將建立一個從左到右的漸變。注意不少瀏覽器（Chrome、Safari、firefox等）的使用了舊的標準，即 0deg 將建立一個從左到右的漸變，90deg 將建立一個從下到上的漸變。換算公式 90 - x = y 其中 x 爲標準角度，y爲非標準角度。

// 語法
background-image: linear-gradient(angle, color-stop1, color-stop2);
複製代碼

css部分

#wrap {
   width: 300px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}
#grad1 {
   height: 150px;
   width: 150px;
   background-color: red; /* 瀏覽器不支持的時候顯示 */
   background-image: linear-gradient(0deg, red, yellow); 
}
#grad2 {
   height: 150px;
   width: 150px;
   background-color: red; /* 瀏覽器不支持的時候顯示 */
   background-image: linear-gradient(90deg, red, yellow); 
}
#grad3 {
    height: 150px;
    width: 150px;
    background-color: red; /* 瀏覽器不支持的時候顯示 */
    background-image: linear-gradient(180deg, red, yellow); 
}
#grad4 {
    height: 150px;
    width: 150px;
    background-color: red; /* 瀏覽器不支持的時候顯示 */
    background-image: linear-gradient(-90deg, red, yellow); 
}
複製代碼

html部分

<div id="wrap">
   <div id="grad1" style="text-align:center;">0deg</div><br>
   <div id="grad2" style="text-align:center;">90deg</div><br>
   <div id="grad3" style="text-align:center;">180deg</div><br>
   <div id="grad4" style="text-align:center;">-90deg</div>
</div>
複製代碼

效果圖

徑向漸變 Radial Gradient

語法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
複製代碼

實例-設置形狀

css部分

#radient {
   display: flex;
   flex-direction: row;
}
.radient {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-right: 20px;
}
#radient1 {
   height: 150px;
   width: 200px;
   background-color: red; /* 瀏覽器不支持的時候顯示 */
   background-image: radial-gradient(red, yellow, #FE280E); /* 標準的語法（必須放在最後） */
}
#radient2 {
    height: 150px;
    width: 200px;
    background-color: red; /* 瀏覽器不支持的時候顯示 */
    background-image: radial-gradient(circle, red, yellow, #FE280E); /* 標準的語法（必須放在最後） */
}
複製代碼

html部分

<div id="radient">
   <div class="radient">
      <p><strong>橢圓形 Ellipse（默認）：</strong></p>
      <div id="radient1"></div>
   </div>
   <div class="radient">
      <p><strong>圓形 Circle：</strong></p>
      <div id="radient2"></div>
   </div>
</div>
複製代碼

效果圖：

實例-顏色均勻

css部分

#radient3 {
   height: 150px;
   width: 200px;
   background-color: red; /* 瀏覽器不支持的時候顯示 */
   background-image: radial-gradient(red, green, blue); /* 標準的語法（必須放在最後） */
}
複製代碼

html部分

<div class="radient">
   <h3>徑向漸變 - 顏色結點均勻分佈</h3>
   <div id="radient3"></div>
</div>
複製代碼

效果圖：

實例-顏色不均勻

css部分

#radient4 {
   height: 150px;
   width: 200px;
   background-color: red; /* 瀏覽器不支持的時候顯示 */
   background-image: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法（必須放在最後） */
}
複製代碼

html部分

<div class="radient">
   <h3>徑向漸變 - 顏色結點不均勻分佈</h3>
   <div id="radient4"></div>
</div>
複製代碼

效果圖：

文字

實例-單行超出顯示省略號

單行超出部分顯示省略號

css部分

.single {
	  width:200px; 
    border:1px solid #c01c1c;
    padding: 20px;
    overflow:hidden;
    white-space:nowrap; 
    text-overflow:ellipsis;
}
複製代碼

html部分

<div class="single">單行超出部分顯示省略號單行超出部分顯示省略號超出部分顯示省略號</div>
複製代碼

效果圖:

實例-多行超出顯示省略號

多行超出部分顯示省略號

css部分

.double {
    width:200px; 
    border:1px solid #c01c1c;
    margin:0 auto;
    overflow : hidden;
    text-overflow: ellipsis;
    padding:0 20px;
    line-height:30px;
    height:60px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
複製代碼

注意：若是多行元素想和單行元素顯示省略號時添加padding效果時，不能直接使用padding進行操做。

html部分

<div class="double">多行超出部分顯示省略號多行超出部分顯示省略號多行超出部分顯示省略號多行超出部分顯示省略號多行超出部分顯示省略號多行超出部分顯示省略號多行</div>
複製代碼

效果圖：

實例-文字陰影

文字陰影 text-shadow

css部分

h1 {
   text-shadow: 5px 5px 5px #FF0000;
}
複製代碼

html部分

<h1>文本陰影效果！</h1>
複製代碼

效果圖：

實例-文字換行

文字換行 word-wrap

css部分

p {
   width: 150px;
   padding: 20px;
   border: 1px solid #FF0000;
   word-wrap: break-word;
}
複製代碼

html部分

<p>
   測試文本換行
   testing word break!
</p>
複製代碼

效果圖：

總結

經過上面的CSS3常見屬性和例子，讓我更加對這些屬性的瞭解。其實這些CSS3屬性看似簡單，但實則真實項目開發中又不容易記住。最重要的是，你們要多加練習，實操是最重要的一環，孰能生巧也是這樣來的！css3不只要會用，也要用好，用好css3，在項目的開發上，頗有幫助的！

最後

但願看到這篇文章的小夥伴都能有所收穫~

歡迎你們加入，一塊兒學習前端，共同進步！

cmd-markdown-logo
cmd-markdown-logo
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程