css3選擇器

相比於css，css3增設了許多css僞類選擇器
具體如下：

選擇器	例子	說明	css
element1~element2	p~ul	選擇前面有 `<p>`元素的每個`<ul>`元素。	3
[attribute^=value]	a[src^=“https”]	（條件選擇器）選擇其 src 屬性值以 “https” 開頭的每個`<a>`元素。	3
[attribute$=value]	a[src$=".pdf"]	（條件選擇器）選擇其 src 屬性以 “.pdf” 結尾的所有`<a>` 元素。	3
[attribute*=value]	a[src*=“abc”]	（條件選擇器）選擇其 src 屬性中包含 “abc” 子串的每個`<a>` 元素。	3
:first-of-type	p:first-of-type	選擇屬於其父元素的首個`<p>` 元素的每個`<p>` 元素。	3
:last-of-type	p:last-of-type	選擇屬於其父元素的最後 `<p>`元素的每個`<p>`元素。	3
:only-of-type	p:only-of-type	選擇屬於其父元素唯一的 `<p>` 元素的每個`<p>` 元素。	3
:only-child	p:only-child	選擇屬於其父元素的唯一子元素的每個 `<p>` 元素。	3
:nth-child(n)	p:nth-child(2)	選擇屬於其父元素的第二個子元素的每個`<p>` 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，從最後一個子元素開始計數。	3
:nth-of-type(n)	p:nth-of-type(2)	選擇屬於其父元素第二個`<p>`元素的每個 `<p>` 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是從最後一個子元素開始計數。 3
:last-child	p:last-child	選擇屬於其父元素最後一個子元素每個`<p>` 元素。	3
:root	:root	選擇文檔的根元素。	3
:empty	p:empty	選擇沒有子元素的每個`<p>`元素（包括文本節點）。	3
:target	#news:target	選擇當前活動的 #news 元素。	3
:enabled	input:enabled	選擇每個啓用的`<input>` 元素。	3
:disabled	input:disabled	選擇每個禁用的`<input>` 元素	3
:checked	input:checked	選擇每個被選中的 `<input>` 元素。	3
:not(selector)	:not( p )	選擇非`<p>` 元素的每個元素。	3
::selection	::selection	選擇被用戶選取的元素部分。	3

css3盒子模型

css除了標準的盒子模型，IE模型外，css3增設了彈性盒子（Flex Box）。

彈性盒子是 CSS3 的一種新的佈局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。
引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

CSS3 彈性盒子內容

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設置 display 屬性的值爲 flex 或 inline-flex將其定義爲彈性容器。
彈性容器內包含了一個或多個彈性子元素。
例如：

        <style type="text/css">
            .wrapper{
                display: flex;
            }
            .left{
                width: 200px;
                height: 300px;
                background: green;
            }
            .middle{
                width: 100%;
                background: red;
                marign: 0 20px;
            }
            .right{
                width: 200px;
                height: 3000px;
                background: yellow;
            }
        </style>
        <body>
        <div class="wrapper">
            <div class="left">左欄</div>
            <div class="middle">中間</div>
            <div class="right">右欄</div>
        </div>
    </body>

關於彈性佈局的一些屬性以及說明

屬性	屬性值	說明
display	flex	彈性佈局的重要參數，相當於清浮後的float：left
flex-direction	row（默認值）:主軸爲水平方向，起點在左端、row-reverse:主軸爲水平方向，起點在右端、column:主軸爲垂直方向，起點在上沿、column-reverse:主軸爲垂直方向，起點在下沿	決定主軸的方向（即項目的排列方向）
flex-wrap	wrap、no-wrap、wrap-reverse、繼承	如果一條軸線排不下，是否換行
flex-flow	flex-direction && flex-wrap	flex-direction屬性和flex-wrap屬性的簡寫形式，默認 row nowrap
justify-content	flex-start 、flex-end 、center 、space-between、space-around	定義了項目在主軸上的對齊方式，具體表現如下圖
align-items	flex-start 、 flex-end 、 center 、baseline 、 stretch	定義項目在交叉軸上如何對齊，具體表現如下圖
align-content	flex-start 、flex-end 、center 、space-between、space-around	定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用，具體表現如下圖
ordert	number	定義項目的排列順序。數值越小，排列越靠前，默認爲0
flex	auto（1 1 auto）和none（0 0 auto）	flex-grow（放大比例），flex-shrink（縮小比例）和flex-basis（分配基礎）的簡寫，默認值爲0 1 auto。後面兩個屬性可選

justify-content：

align-items：

align-content：

css3背景和邊框

css3背景

CSS3 background-image屬性
CSS3中可以通過background-image屬性添加背景圖片。
不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的爲第一張。

CSS3 background-size 屬性
background-size指定背景圖像的大小。CSS3以前，背景圖像大小由圖像的實際大小決定。
CSS3中可以指定背景圖片，讓我們重新在不同的環境中指定背景圖片的大小。您可以指定像素或百分比大小（相對於父元素的寬度和高度的百分比的大小）。

CSS3的background-Origin屬性
background-Origin屬性指定了背景圖像的位置區域。
content-box, padding-box,和 border-box區域內可以放置背景圖像。

CSS3 background-clip屬性
CSS3中background-clip背景剪裁屬性是從指定位置開始繪製。

新的背景屬性

順序	描述	例子	CSS
background-clip	規定背景的繪製區域。	background-clip: content-box/padding-box/border-box;	3
background-origin	規定背景圖片的定位區域。	background-origin: content-box/padding-box/border-box;	3
background-size	規定背景圖片的尺寸。	background-size:100% 100%;	3

CSS3 多重背景(multiple backgrounds)

多重背景，也就是CSS2裏background的屬性外加origin、clip和size組成的新background的多次疊加，縮寫時爲用逗號隔開的每組值；用分解寫法時，如果有多個背景圖片，而其他屬性只有一個（例如background-repeat只有一個），表明所有背景圖片應用該屬性值。

語法縮寫如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以把上面的縮寫拆解成以下形式：

background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

注意：

用逗號隔開每組 background 的縮寫值；
如果有 size 值，需要緊跟 position 並且用 “/” 隔開；
如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應用該屬性值。
background-color 只能設置一個。

css3邊框

CSS3 圓角
在 CSS2 中添加圓角棘手。我們不得不在每個角落使用不同的圖像。
在 CSS3 中，很容易創建圓角。
在 CSS3 中 border-radius 屬性被用於創建圓角：這是圓角邊框！

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

border-radius: 2em 1em 4em / 0.5em 3em;
/*相當於*/
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

CSS3 盒陰影
CSS3 中的 box-shadow 屬性被用來添加陰影

語法：box-shadow: h-shadow（水平陰影的位置） v-shadow（垂直陰影的位置） blur（模糊距離） spread（陰影的大小） color（陰影的顏色） inset（從外層的陰影（開始時）改變陰影內側陰影）;
實例：

box-shadow: 10px 10px 5px #888888;

CSS3 邊界圖片
有了 CSS3 的 border-image 屬性，你可以使用圖像創建一個邊框。
border-image 屬性允許你指定一個圖片作爲邊框！用於創建上文邊框的原始圖像

語法：border-image: source（url） slice（向內偏移） width（邊界的寬度） outset （邊框外部繪製 border-image-area 的量）repeat（是否應重複（repeat）、拉伸（stretch）或鋪滿（round））|initial|inherit
實例：
在 div 中使用圖片創建邊框

div{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

css3漸變

CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。

以前，你必須使用圖像來實現這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的時間和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因爲漸變（gradient）是由瀏覽器生成的。

CSS3 定義了兩種類型的漸變（gradients）：

線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義

漸變相關屬性：background-image。

線性漸變
語法：/*水平漸變 */background-image: linear-gradient(direction（to bottom、to top、to right、to left、to bottom）, color-stop1, color-stop2, ...);
/*角度漸變 */background-image: linear-gradient(angle（deg）, color-stop1, color-stop2);

注意：線性漸變 - 從上到下（默認情況下），CSS3 漸變也支持透明度（transparent），可用於創建減弱變淡的效果。

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

徑向漸變
語法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);
具體情況：

顏色結點均勻分佈（默認情況下），例如：background-image: radial-gradient(red, yellow, green);
顏色結點不均勻分佈，例如：background-image: radial-gradient(red 5%, yellow 15%, green 60%);
形狀漸變，例如：background-image: radial-gradient(circle/ellipse , red, yellow, green);

css3 文本效果/字體

css3 文本效果

CSS3 的文本陰影
CSS3 中，text-shadow屬性適用於文本陰影。

語法：text-shadow: h-shadow（水平陰影的位置） v-shadow（垂直陰影的位置） blur（模糊距離） spread（陰影的大小） color（陰影的顏色） inset（從外層的陰影（開始時）改變陰影內側陰影）;
實例：

h1{
    text-shadow: 5px 5px 5px #FF0000;
}

彩色字體的實現

<style>
/*由於內核不同 需加前綴谷歌-webkit-  (私有化)*/
/**
*原理：
*1.設置文字顏色爲透明色   -webkit-text-fill-color:transparent;
*2.設置盒子背景爲漸變色    background-image: linear-gradient();
*3.將背景裁切到“文字字符範圍”   -webkit-background-clip:text;
*/
.color_text{
	font-size: 50px;
	-webkit-text-fill-color:transparent;
	-moz-text-fill-color:transparent;
	text-fill-color:transparent;
	/*先寫私有的再寫公有的*/
	background: linear-gradient(90deg,red,orange,yellow,green,violet,blue,pink,gray,red) 10px 0 / 100px 100px;
	-webkit-background-clip:text;
	-moz-background-clip:text;
	background-clip:text;
}
</style>

<body>
	<div class="color_text">
		這是彩色字體！This is the colorful text！
	</div>
</body>

CSS3 的盒子陰影
陰影的一個使用特例是卡片效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
div.polaroid {
  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;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>
<div class="polaroid">
  <img src="..." alt="hello" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>
</body>
</html>

CSS3 Text Overflow屬性
CSS3文本溢出屬性指定應向用戶如何顯示溢出內容

語法：text-overflow: clip（截取）|ellipsis（省略）|string（使用給定的字符串來代表）;

CSS3 單詞拆分換行
單詞拆分語法：word-break: normal（瀏覽器默認的換行規則）|break-all（允許在單詞內換行）|keep-all（只能在半角空格或連字符處換行）;
單詞換行語法：word-wrap: normal（允許的斷字點換行）|break-word（在長單詞或 URL 地址內部進行換行）;

css3 2D/3D轉換（transform）

2D轉換

2D變換方法：translate()，rotate()，scale()，skew()，matrix()；

translate()平移
translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。translateX()，translateY()的簡寫
語法：transform: translate(X軸，Y軸);

rotate()旋轉
rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
語法：transform: rotate(deg);

scale()縮放
scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數，scaleX()，scaleY()的簡寫
語法：transform: scale(倍數,倍數);

skew() 傾斜
語法：transform:skew(<angle> [,<angle>]);
包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數爲空，則默認爲0，參數爲負表示向相反方向傾斜。

skewX(<angle>);表示只在X軸(水平方向)傾斜。
skewY(<angle>);表示只在Y軸(垂直方向)傾斜。

3D轉換

屬性	描述	CSS
transform	向元素應用 2D 或 3D 轉換。	3
transform-origin	允許你改變被轉換元素的位置。	3
transform-style	規定被嵌套元素如何在 3D 空間中顯示。	3
perspective	規定 3D 元素的透視效果。（觀察距離）	3
perspective-origin	規定 3D 元素座標原點位置。	3
backface-visibility	定義元素在不面對屏幕時是否可見。	3

3D 轉換方法

函數	描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z) 定義	3D 轉化。
translateX(x)	定義 3D 轉化，僅使用用於 X 軸的值。
translateY(y)	定義 3D 轉化，僅使用用於 Y 軸的值。
translateZ(z)	定義 3D 轉化，僅使用用於 Z 軸的值。
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	定義 3D 縮放轉換，通過給定一個 X 軸的值。
scaleY(y)	定義 3D 縮放轉換，通過給定一個 Y 軸的值。
scaleZ(z)	定義 3D 縮放轉換，通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿 X 軸的 3D 旋轉。
rotateY(angle)	定義沿 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿 Z 軸的 3D 旋轉。
perspective(n)	定義 3D 轉換元素的透視視圖。

css3動畫與過度

css3動畫

定義動畫
當在 @keyframes 創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

規定動畫的名稱
規定動畫的時長

例如：

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

@keyframes donghua
{
    0%{background: red;}
    25%{background: yellow;}
    50%{background: yellow;}
    75%{background: yellow;}
    100%{background: yellow;}
}

綁定動畫

div{
    animation: donghua 5s;
    -webkit-animation: donghua 5s; /* Safari 與 Chrome */
}

語法：animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

屬性、屬性值	說明	屬性值
animation-name	指定要綁定到選擇器的關鍵幀的名稱	name
animation-duration	動畫指定需要多少秒或毫秒完成	ms、s
animation-timing-function	設置動畫將如何完成一個週期	linear（動畫從頭到尾的速度是相同的）、ease （默認。動畫以低速開始，然後加快，在結束前變慢）、ease-in （動畫以低速開始）、ease-out （動畫以低速結束）、ease-in-out （動畫以低速開始和結束）
animation-delay	設置動畫在啓動前的延遲間隔。	ms、s
animation-iteration-count	定義動畫的播放次數。	n（一個數字，定義應該播放多少次動畫）、infinite（指定動畫應該播放無限次（永遠））
animation-direction	指定是否應該輪流反向播放動畫。	normal （默認值。動畫按正常播放）、reverse （動畫反向播放）、alternate（動畫在奇數次（1、3、5…）正向播放，在偶數次（2、4、6…）反向播放）、alternate-reverse （動畫在奇數次（1、3、5…）反向播放，在偶數次（2、4、6…）正向播放）

css3過渡

語法：transition: property duration timing-function delay;

屬性	描述	屬性值	CSS
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。	property duration timing-function delay	3
transition-property	規定應用過渡的 CSS 屬性的名稱。	none、all、 property（自定義transfrom逗號隔開）	3
transition-duration	定義過渡效果花費的時間。默認是 0。	ms、s	3
transition-timing-function	規定過渡效果的時間曲線。默認是 “ease”。	同上animation-timing-function	3
transition-delay	規定過渡效果何時開始。默認是 0。	ms、s	3

實例：

transition: all 1s linear 2s;

實例二：
html

<div></div>

css

div{
  width: 200px;
  height: 200px;
  background-color: #f00;
  transition: all 2s;
}

div:hover{
  background-color: #00f;
  transform: translateX(500px) translateY(500px) scale(0.8) rotate(360deg);
}

css3多列布局

CSS3 多列屬性：
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

CSS3 創建多列
column-count 屬性指定了需要分割的列數。

實例：
html：

<div  class="column">
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
</div>

css

.column{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

CSS3 多列中列與列間的間隙
column-gap 屬性指定了列與列間的間隙。
實例：

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

CSS3 列邊框
column-rule-style 屬性指定了列與列間的邊框樣式：

實例

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule:1px solid red;
}

css3指定元素跨越多少列
以下實例指定<h2>元素跨越所有列：

實例：

/*在多列內，用作標題*/
h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

指定多列的寬度
column-width 屬性指定了列的寬度。

實例：

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;  /*多列的寬度都爲100px*/
}

css3用戶界面

css3圖片

圓角圖片
設置border-radius

實例：圓角圖片

img {
    border-radius: 8px;
}

實例：橢圓形圖片

img {  /*寬高不同*/
    border-radius: 50%;
}

縮略圖

<style>
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}
</style>

<body>
<img src="xxx.jpg" alt="xxx" width="400" height="300">
</body>

縮略顯示

<style>
a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}
a:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>

<body>
<a target="_blank" href="xxx.jpg">
  <img src="xxx.jpg" alt="xxx" width="400" height="300">
</a>
</body>

圖片濾鏡 filter

.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}
.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}
.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);
}

圖片 Modal(模態)、圖片模盒

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

<body>
	<img id="myImg" src="xxx.jpg" alt="hello" width="300" height="200">
	
	<!-- 模盒 -->
	<div id="myModal" class="modal">
	  <span class="close">×</span>
	  <img class="modal-content" id="img01">
	  <div id="caption"></div>
	</div>
</body>

css：

<style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}

/* 模盒 (background) */
.modal {
    display: none;
    position: fixed; 
    z-index: 1; 
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
}

/* 模盒內容 (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* 模盒標題 */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* 動態 */
.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)}
}

/* x按鈕 */
.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>

js：

<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>

css3按鈕

button默認樣式

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

動態按鈕
鼠標移動到按鈕上後添加箭頭標記

html

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

css

<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  padding: 10px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 15px;  /*>>的位置*/
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>

css3 分頁

分頁：

<style>
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;
    border-radius: 5px;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>

<body>
	<h2>圓角樣式</h2>
		<ul class="pagination">
			  <li><a href="#">«</a></li>
			  <li><a href="#">1</a></li>
			  <li><a class="active" href="#">2</a></li>
			  <li><a href="#">3</a></li>
			  <li><a href="#">4</a></li>
			  <li><a href="#">5</a></li>
			  <li><a href="#">6</a></li>
			  <li><a href="#">7</a></li>
			  <li><a href="#">»</a></li>
		</ul>
</body>

麪包屑：

<style>
ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb li a {color: green;}
</style>

<body>
<h2>麪包屑導航</h2>
<ul class="breadcrumb">
  <li><a href="#">首頁 </a></li>
  <li><a href="#">前端 </a></li>
  <li><a href="#">HTML 教程 </a></li>
  <li>HTML 段落</li>
</ul>
</body>

css3多媒體查詢

多媒體查詢語法
多媒體查詢由多種媒體組成，可以包含一個或多個表達式，表達式根據條件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {
    CSS 代碼...;
}

如果指定的多媒體類型匹配設備類型則查詢結果返回 true，文檔會在匹配的設備上顯示指定樣式效果。

除非你使用了 not 或 only 操作符，否則所有的樣式會適應在所有設備上顯示效果。

not: not是用來排除掉某些特定的設備的，比如 @media not print（非打印設備）。
only: 用來定某種特別的媒體類型。對於支持Media Queries的移動設備來說，如果存在only關鍵字，移動設備的Web瀏覽器會忽略only關鍵字並直接根據後面的表達式應用樣式文件。對於不支持Media Queries的設備但能夠讀取Media Type類型的Web瀏覽器，遇到only關鍵字時會忽略這個樣式文件。
all: 所有設備，這個應該經常看到。
print: 用於打印機
screen: 用於電腦屏幕，平板，智能手機等。
speech: 用於屏幕閱讀器

實例：

@media screen and (min-width: 480px) {
    body {
        background-color: green;
    }
}

without BUG

發佈了37 篇原創文章 · 獲贊 6 · 訪問量 2221

私信關注

前端點滴（CSS3）

前端點滴（CSS3）----傾盡所有