CSS3 屬性樣式總結記錄

1 、邊框-背景

border-image 設置所有邊框圖像的速記屬性。 3

border-radius 一個用於設置所有四個邊框- *-半徑屬性的速記屬性 3

box-shadow 附加一個或多個下拉框的陰影

border-image	設置所有邊框圖像的速記屬性。	3
border-radius	一個用於設置所有四個邊框- *-半徑屬性的速記屬性	3
box-shadow	附加一個或多個下拉框的陰影

代碼1-1 邊框

div
{
	border:2px solid #11a1a1a1;
	padding:10px 40px; 
	background:#fff;
	width:300px;
	border-radius:25px;
	color:#999999
}

圖片1-1

代碼1-2 陰影

div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #e1e1e1;
}

圖片1-2

代碼1-3 使用圖片作爲邊框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style> 
div
{
	border:15px solid transparent;
	width:250px;
	padding:10px 20px;
}

#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;
}

#stretch
{
	-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
	-o-border-image:url(border.png) 30 30 stretch; /* Opera */
	border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>

<p><b>注意: </b> Internet Explorer 不支持 border-image 屬性。</p>
<p> border-image 屬性用於設置圖片的邊框。</p>

<div id="round">這裏，圖像平鋪（重複）來填充該區域。</div>
<br>
<div id="stretch">這裏，圖像被拉伸以填充該區域。</div>

<p>這是我們使用的圖片素材：</p>
<img src="/images/border.png" />

</body>
</html>

圖片1-3

代碼1-4 背景

#rcorners3 {
    border-radius: 25px;
    background: url(/images/paper.gif);
    background-position: left top;
    background-repeat: no-repeat; repeat（鋪滿）
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

圖片1-4

代碼 1-5 橢圓邊框

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;
}

圖片1-5

代碼1-6 組合圖片背景

會按照順序，找到自己的屬性

給背景設置尺寸：background-size:80px 60px;

拉伸填滿爲：background-size:100% 100%;

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    padding: 15px;
}

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}

圖片1-6

代碼1-7 背景範圍

content-box, padding-box,和 border-box區域內可以放置背景圖像

div
{
	border:20px solid black;
	padding:35px;
	background-image:url('smiley.gif');
	background-repeat:no-repeat;
	background-position:left;
}
#div1
{
	background-origin:border-box;
	background-size:100% 100%
}
#div2
{
	background-origin:padding-box;
	background-size:100% 100%
}
#div3
{
	background-origin:content-box;
	background-size:100% 100%
}

圖片1-7

代碼 1-8 背景裁切

#example1 {
    border: 10px dotted black;
    padding:35px;
    background: url("https://dss0.baidu.com/73F1bjeh1BF3odCf/it/u=2565139395,3055187965&fm=85&s=F30BB044E6136FDC9D32599B0300C09C");
	background-origin: border-box;
	background-clip: content-box;
	background-repeat:no-repeat;
}

#example2 {
	
    border: 10px dashed black;
    padding:35px;
    background: url("https://dss0.baidu.com/73F1bjeh1BF3odCf/it/u=2565139395,3055187965&fm=85&s=F30BB044E6136FDC9D32599B0300C09C");
	background-clip: content-box;
	background-repeat:no-repeat;
}

圖片1-8

代碼1-9 漸變

從左上角 - 右下角

#grad1 {
    height: 200px;
    background-color: red; /* 不支持線性的時候顯示 */
    background-image: linear-gradient(to bottom right, red , yellow);
}

圖片1-9

角度漸變：

即 0deg 將創建一個從左到右的漸變，90deg 將創建一個從下到上的漸變。換算公式 90 - x = y 其中 x 爲標準角度，y爲非標準角度。

background-image: linear-gradient(-90deg, red, yellow);

多個顏色節點，非均勻分佈

background-image: linear-gradient(red 10%, green 85%, blue 90%); /* 標準的語法（必須放在最後） */
}

重複線性漸變

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

透明漸變：

爲了添加透明度，我們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最後一個參數可以是從 0 到 1 的值

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

代碼 1-10 徑向漸變 + 設置形狀

 background-image: radial-gradient(ellipse, rgba(255,0,0,0) , yellow 20% , green 30% ); /* 標準的語法（必須放在最後） */

2、文本相關

2.1 文字效果

text-shadow
- ```
text-shadow: 5px 5px 5px #FF000330;
```
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-WHS47IUt-1590213508334)(C:\Users\00\AppData\Roaming\Typora\typora-user-images\1589768820129.png)]

box-shadow

div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888; //5px 是模糊的範圍 #888888 陰影的顏色
}

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

text-overflow

div.ex1 {
	white-space:nowrap;   //文字只顯示在一行
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;  //hidden  auto  visible(默認)
}

word-wrap

word-wrap:break-word; //超出部分強制換行

word-break

word-break:break-all; //允許單詞拆分

```
word-break:keep-all;
```

附加記錄

   通過調整單詞之間的 距離，保證每一行，對齊。
   text-align:justify;
   text-justify:inter-word;

2.2 2D轉換

ratate 旋轉

{
	width:200px;
	height:100px;
	background-color:yellow;
	/* Rotate div */
	transform:rotate(30deg);
	-ms-transform:rotate(30deg); /* IE 9 */
	-webkit-transform:rotate(30deg); /* Safari and Chrome */
}

translate 平移

div#div2
{
	transform:translate(50px,100px);
	-ms-transform:translate(50px,100px); /* IE 9 */
	-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}

scale 縮放

//縮小0.5倍 
div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    border: 1px solid black;
    -ms-transform: scale(0.5,0.5); /* IE 9 */
    -webkit-transform: scale(0.5,0.5); /* Safari */
    transform: scale(0.5,0.5); /* 標準語法 */
}

matrix 處理旋轉、縮放、平移和傾斜功能

參數一：x 縮放 ； 參數 二：沿 x 軸傾斜 ；參數 三：沿y 軸傾斜； 參數四：y 縮放
參數五：x 位移；參數六：y 位移；（）
div#div2
{
	transform:matrix(0.866,0.5,-0.5,0.866,0,0);
	-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
	-webkit-transform:matrix(1,0,-0.5,0.8,0,0); /* Safari and Chrome */
}

matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
translate(x,y)	定義 2D 轉換，沿着 X 和 Y 軸移動元素。
translateX(n)	定義 2D 轉換，沿着 X 軸移動元素。
translateY(n)	定義 2D 轉換，沿着 Y 軸移動元素。
scale(x,y)	定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n)	定義 2D 縮放轉換，改變元素的寬度。
scaleY(n)	定義 2D 縮放轉換，改變元素的高度。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
skew(x-angle,y-angle)	定義 2D 傾斜轉換，沿着 X 和 Y 軸。
skewX(angle)	定義 2D 傾斜轉換，沿着 X 軸。
skewY(angle)	定義 2D 傾斜轉換，沿着 Y 軸。

2.3 3D轉換

rotateX() 沿X軸旋轉

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
}

rotateY() 沿Y軸旋轉

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
}

2.4 過渡

多種屬性，同時過渡 （寬、高、旋轉）

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

2.4.1 與上圖效果相同（只是將屬性單獨拿出來設置了）

div
{
	width:100px;
	height:100px;
	background:red;
	transition-property:width,height,transform;
	transition-duration:1s;
	transition-timing-function:linear;
	transition-delay:2s;
	/* Safari */
	-webkit-transition-property:width,height,-webkit-transform;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
}

div:hover
{
	
	width: 200px;
    height: 200px;
	-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);

}

2.4.2 先豎向延長，然後等2秒，橫向延長

div
{
	width:100px;
	height:100px;
	background:red;
	transition:height 1s, width 1s  linear 2s;
	/* Safari */
	-webkit-transition:height 1s , width 1s linear 2s;
}

div:hover
{
	width:200px;
	height:200px;
}

3、動畫相關

3.1 顏色變化（簡單例子）

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red;}
	to {background:yellow;}
}

3.2 關鍵幀控制

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-moz-animation:myfirst 5s; /* Firefox */
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

3.3 動畫單個屬性

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation-name:myfirst;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-delay:2s;
	animation-iteration-count:infinite; //動畫播放次數 (無限次)
	animation-direction:alternate; // 動畫播放方向 (1/3/5正向，2/4/6逆向)
	animation-play-state:running;
	/* Safari and Chrome: */
	-webkit-animation-name:myfirst;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:2s;
	-webkit-animation-iteration-count:infinite; //動畫播放次數 (無限次)
	-webkit-animation-direction:alternate; // 動畫播放方向 (1/3/5正向，2/4/6逆向)
	-webkit-animation-play-state:running;  
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

4、新用戶界面

4.1 多列

.newspaper
{
	-moz-column-count 2; /* Firefox */
	-webkit-column-count:2; /* Safari and Chrome */
	column-count:3; //列數

	-moz-column-gap:40px; /* Firefox */
	-webkit-column-gap:40px; /* Safari and Chrome */
	column-gap:100px; //列之間的間隔
}

4.2 列分割線

column-rule-style:solid;

4.3 可由 ‘用戶調整大小’

	resize:horizontal; //不能調整 ，橫向 ，縱向 ，橫向加縱向  
	overflow:auto;

5、圖片

5.1 圖片圓角

<img src="paris.jpg" alt="Paris" width="400" height="300">

//相框效果 
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

5.2 調整圖片中的文本位置

.container {
    position: relative;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
	margin-top:-9px; // (調整 文字自身高度的 一半)
}
img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}

5.3 卡片效果（用陰影效果實現）

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}
</style>
</head>
<body>
<h2>響應式卡片</h2>
<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>The Troll's tongue in Hardanger, Norway</p>
  </div>
</div>

5.4 圖片濾鏡

img {
    width: 33%;
    height: auto;
    float: left; 
    max-width: 235px;
}

.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>

<p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持該屬性。</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

5.5 圖片點擊方大（圖片模態框）

圖片模態框

本實例演示瞭如何結合 CSS 和 JavaScript 來一起渲染圖片。
首先，我們使用 CSS 來創建 modal 窗口 (對話框), 默認是隱藏的。
然後，我們使用 JavaScript 來顯示模態窗口，當我們點擊圖片時，圖片會在彈出的窗口中顯示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes zoom {
    from {transform: scale(0.1)} 
    to {transform: scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>
</head>
<body>

<h2>圖片模態框</h2>
<p>本實例演示瞭如何結合 CSS 和 JavaScript 來一起渲染圖片。</p><p>
首先，我們使用 CSS 來創建 modal 窗口 (對話框), 默認是隱藏的。<p>
<p>然後，我們使用 JavaScript 來顯示模態窗口，當我們點擊圖片時，圖片會在彈出的窗口中顯示：</p>
<img id="myImg" src="http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&f=JPEG?w=1280&h=853" alt="Northern Lights, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// 獲取模態窗口
var modal = document.getElementById('myModal');

// 獲取圖片模態框，alt 屬性作爲圖片彈出中文本描述
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

// 獲取 <span> 元素，設置關閉模態框按鈕
var span = document.getElementsByClassName("close")[0];

// 點擊 <span> 元素上的 (x), 關閉模態框
span.onclick = function() { 
    modal.style.display = "none";
}
</script>

</body>
</html>

6、按鈕

6.1鼠標懸停按鈕效果

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

6.2 按鈕陰影+ 按鈕懸停陰影

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

6.3 正常按鈕+禁用按鈕(透明度)

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer; //懸浮手指
}

.disabled {
    opacity: 0.6; //透明度
    cursor: not-allowed; //禁用標誌
}

6.4 清除浮動

.button {

    float: left;
}
	
p{
 clear:both
}

6.5 懸浮時添加動畫 + 添加文字

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 1.5s;
}
.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

6.6 按鈕點擊波紋效果

.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

6.7 按壓效果

.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

7、分頁

7.1 鼠標懸停分頁樣式

hover 懸停時，不執行 a.active 屬性執行 {background-color: #4CAF50;}

ul.pagination {
   display: inline-block;
   padding: 0;
   margin: 0;
}
ul.pagination li {display: inline;}

ul.pagination li a {
   color: black;
   float: left;
   padding: 8px 16px;
   text-decoration: none;
}

ul.pagination li a.active {
   background-color: #ddd;
   color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #4CAF50;}

8 框大小

8.1 box-sizing: border-box; （border和 padding 都計算在 width height 內)

屬性在一個元素的 width 和 height 中包含 padding(內邊距) 和 border(邊框)。

如果在元素上設置了 box-sizing: border-box; 則 padding(內邊距) 和 border(邊框) 也包含在 width 和 height 中:

9 多媒體查詢器

9.1 根據屏幕 width ，控制樣式

屏幕width 在 699px – 520px 之間顯示郵件圖標

屏幕width 在 700px – 1001px 之間顯示 “ Email:”

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
</style>
</head>
<body>

<ul>
  <li><a data-email="[email protected]" href="mailto:[email protected]">John Doe</a></li>
  <li><a data-email="[email protected]" href="mailto:[email protected]">Mary Moe</a></li>
  <li><a data-email="[email protected]" href="mailto:[email protected]">Amanda Panda</a></li>
</ul>

彈性盒子(Flex Box)

彈性容器通過設置 display 屬性的值爲 flex 或 inline-flex將其定義爲彈性容器。

默認一行顯示。

direction 屬性爲 rtl (right-to-left),彈性子元素的排列方式也會改變，頁面佈局也跟着改變:
flex-direction`的值有:
row：橫向從左到右排列（左對齊），默認的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

justify-content 對齊屬性（內容按主線對齊）

justify-content: flex-start | flex-end | center | space-between | space-around

flex-wrap 屬性

flex-wrap 屬性用於指定彈性盒子的子元素換行方式。

align-content 屬性

align-content屬性用於修改flex-wrap屬性的行爲。類似於align-items`, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。

order 作爲排序值越大排在越後面

代碼

.first1 {
-webkit-order: 3;
}
.first2 {
-webkit-order: 2;
}
.first3 {
-webkit-order: -1;
}

flex item 1

flex item 2

flex item 3

示例圖

margin: auto;

可以做一些，居中控制。

也可以在指定方向上做均勻調整。 margin-right: auto;

align-self

align-self` 屬性用於設置彈性元素自身在側軸（縱軸）方向上的對齊方式。

flex-grow 分剩餘空間佔空間比例

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}

flex-basis 代替 width/height

比 width/height 優先級高

flex-shrink 壓縮率

當子元素超過父元素超過寬度/高度，又不能超出父元素是時，採用的壓縮比。

彈性盒子小結：

屬性	描述
display	指定 HTML 元素盒子類型。
flex-direction	指定了彈性容器中子元素的排列方式
justify-content	設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items	設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-wrap	設置彈性盒子的子元素超出父容器時是否換行。
align-content	修改 flex-wrap 屬性的行爲，類似 align-items, 但不是設置子元素對齊，而是設置行對齊
flex-flow	flex-direction 和 flex-wrap 的簡寫
order	設置彈性盒子的子元素排列順序。
align-self	在彈性子元素上使用。覆蓋容器的 align-items 屬性。
flex	設置彈性盒子的子元素如何分配空間。

疑難樣式記錄

（1）文本單行顯示限制


  letter-spacing: 2px;  /*字間距*/
  display:block;/*內聯對象需加*/
  width:5em;/*指定寬度*/
  word-break:keep-all;/* 不換行 */
  white-space:nowrap;/* 強制在同一行內顯示所有文本,直到文本結束或者遭遇 br 對象。不換行 */
  overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
  text-overflow:ellipsis;/* IE 專有屬性,當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使用。*/

(2) 多行文本顯示限制

  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

疑難樣式記錄

（1）文本單行顯示限制


  letter-spacing: 2px;  /*字間距*/
  display:block;/*內聯對象需加*/
  width:5em;/*指定寬度*/
  word-break:keep-all;/* 不換行 */
  white-space:nowrap;/* 強制在同一行內顯示所有文本,直到文本結束或者遭遇 br 對象。不換行 */
  overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
  text-overflow:ellipsis;/* IE 專有屬性,當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使用。*/

(2) 多行文本顯示限制

  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

CSS3 屬性樣式總結記錄（圖文）

CSS3 屬性樣式總結記錄

1 、邊框-背景

代碼1-1 邊框

圖片1-1

代碼1-2 陰影

圖片1-2

代碼1-3 使用圖片作爲邊框

圖片1-3

代碼1-4 背景

圖片1-4

代碼 1-5 橢圓邊框

圖片1-5

代碼1-6 組合圖片背景

圖片1-6

代碼1-7 背景範圍

圖片1-7

代碼 1-8 背景裁切

圖片1-8

代碼1-9 漸變

圖片1-9

代碼 1-10 徑向漸變 + 設置形狀

2、文本相關

2.1 文字效果

附加記錄

2.2 2D轉換

2.3 3D轉換

2.4 過渡

2.4.1 與上圖 效果相同 （只是將屬性單獨拿出來設置了）

2.4.2 先豎向延長，然後等2秒 ，橫向延長

3、動畫相關

3.1 顏色變化（簡單例子）

3.2 關鍵幀控制

3.3 動畫 單個屬性

4、新用戶界面

4.1 多列

4.2 列分割線

4.3 可由 ‘用戶調整大小’

5、圖片

5.1 圖片圓角

5.2 調整圖片中的文本位置

5.3 卡片效果（用 陰影效果 實現）

5.4 圖片濾鏡

5.5 圖片點擊方大 （圖片模態框）

6、按鈕

6.1鼠標懸停 按鈕效果

6.2 按鈕陰影+ 按鈕懸停陰影

6.3 正常按鈕+禁用按鈕(透明度)

6.4 清除浮動

6.5 懸浮時 添加動畫 + 添加文字

6.6 按鈕點擊 波紋效果

6.7 按壓效果

7、分頁

7.1 鼠標懸停分頁樣式

8 框大小

8.1 box-sizing: border-box; （border和 padding 都計算在 width height 內)

9 多媒體查詢器

9.1 根據屏幕 width ，控制 樣式

彈性盒子(Flex Box)

justify-content 對齊屬性 （內容按主線對齊）

flex-wrap 屬性

align-content 屬性

order 作爲排序值 越大排在越後面

代碼

示例圖

margin: auto;

align-self

flex-grow 分剩餘空間佔空間 比例

flex-basis 代替 width/height

flex-shrink 壓縮率

彈性盒子 小結：

疑難樣式 記錄

（1） 文本單行顯示 限制

(2) 多行文本顯示 限制

疑難樣式 記錄

（1） 文本單行顯示 限制

(2) 多行文本顯示 限制

以上是我在看【前端知識點】時的對【CSS3】樣式的整理，以及開發中遇到的一些，難調的樣式的總結（持續完善中。。。）

2.4.1 與上圖效果相同（只是將屬性單獨拿出來設置了）

2.4.2 先豎向延長，然後等2秒，橫向延長

3.3 動畫單個屬性

5.3 卡片效果（用陰影效果實現）

5.5 圖片點擊方大（圖片模態框）

6.1鼠標懸停按鈕效果

6.5 懸浮時添加動畫 + 添加文字

6.6 按鈕點擊波紋效果

9.1 根據屏幕 width ，控制樣式

justify-content 對齊屬性（內容按主線對齊）

order 作爲排序值越大排在越後面

flex-grow 分剩餘空間佔空間比例

彈性盒子小結：

疑難樣式記錄

（1）文本單行顯示限制

(2) 多行文本顯示限制

疑難樣式記錄

（1）文本單行顯示限制

(2) 多行文本顯示限制