一篇文章帶你了解CSS3圓角知識

、瀏覽器支持

表中的數字指定完全支持該屬性的第一個瀏覽器版本。

數字后面的 -webkit- 或者 -moz- 使用時需要指定前綴。

屬性ChromeFirefoxSafariOperaIEborder-radius5.0 4.0 -webkit-9.04.0 3.0 -moz-5.0 3.1 -webkit-10.5

二、border-radius 屬性

1. 創建具有背景圖的圓角

CSS3中，可以使用border-radius屬性，為元素指定圓角顯示。

代碼如下：

<!DOCTYPE html>
    <html>
    <meta charset="UTF-8">
    <title>項目</title>

    <head>
        <style>
            #rcorners1 {
                border-radius: 25px;
                background: #f00;
                padding: 20px;
                width: 200px;
                height: 150px;
            }

            #rcorners2 {
                border-radius: 25px;
                border: 2px solid #73AD21;
                padding: 20px;
                width: 200px;
                height: 150px;
            }

            #rcorners3 {
                border-radius: 25px;
                background: url(img/fy_indexBg.jpg);
                background-position: left top;
                background-repeat: repeat;
                padding: 20px;
                width: 200px;
                height: 150px;
            }
</style>
    </head>

    <body>

        <p>The border-radius property allows you to add rounded corners to elements.</p>
        <p>Rounded corners for an element with a specified background color:</p>
        <!--1.具有指定背景色的圓角元素-->
        <p id="rcorners1">Rounded corners!</p>
        <p>Rounded corners for an element with a border:</p>
        <!--2.帶邊框的圓角元素:-->
        <p id="rcorners2">Rounded corners!</p>
        <!--3.帶背景圖的圓角元素-->
        <p>Rounded corners for an element with a background image:</p>
        <p id="rcorners3">Rounded corners!</p>

    </body>

</html>

提示:

border-radius屬性實際是border-top-left-radius, border-top-right-radius, border-bottom-right-radius 和 border-bottom-left-radius 屬性的簡寫。

2. 為每個角指定弧度

如果只為border-radius屬性指定一個值，則此半徑將應用于所有4個角。

另外可以根據自己開發的需求，分別指定每個角。以下是規則：

四個值: 第一個值適用于左上角，第二個值適用于右上方，第三值應用于右下角，第四值適用于左下角。

三個值: 第一個值適用于左上，二值適用于右上和左下，右下第三值適用于。

兩個值: 第一個值適用于左上和右下角，和二值適用于右上和左下角。

一個值: 所有的四個角都是圓的。

實例1：

1.四個值 - border-radius: 15px 50px 30px 5px

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

2.三個值 - border-radius: 15px 50px 30px

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

3.兩個值 - border-radius: 15px 50px

#rcorners6 {
    border-radius: 15px 50px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>項目</title>
  <style>
  #rcorners4 {
      border-radius: 15px 50px 30px 5px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }

  #rcorners5 {
      border-radius: 15px 50px 30px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }

  #rcorners6 {
      border-radius: 15px 50px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }
</style>
</head>
<body>

<p>四個值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>

<p>三個值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>

<p>兩個值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>

</body>
</html>

實例2：

創建橢圓形的圓角

創建橢圓形的圓角

橢圓邊框：border-radius: 50px/15px

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

橢圓邊框： border-radius: 15px/50px

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

橢圓邊框： border-radius: 50%

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

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>項目</title>
  <style>
    #rcorners7 {
        border-radius: 50px/15px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

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

    #rcorners9 {
        border-radius: 50%;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
</style>
</head>
<body>

  <p>橢圓邊框 - border-radius: 50px/15px:</p>
  <p id="rcorners7"></p>

  <p>橢圓邊框 - border-radius: 15px/50px:</p>
  <p id="rcorners8"></p>

  <p>橢圓邊框 - border-radius: 50%:</p>
  <p id="rcorners9"></p>-->

</body>
</html>

三、總結

1、本文主要講解了CSS3圓角，通過一些屬性的演示，豐富的案例，幫助大家理解CSS知識。希望大家可以耐心的去學習，同時希望碰到問題主動搜索，嘗試一下，總會有解決方法。

2、代碼很簡單，希望能幫到你。

想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/

明：SVG 雖然也是標簽，但它不是 HTML5，標題加了 HTML5 只是為了與 canvas 放到一起。

一、為什么要學 SVG ?

SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基于像素的，但是 SVG 沒有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會失真。

與其他圖像比較，SVG 的優勢有以下幾點：

SVG 可以被多個工具讀取和修改。
SVG 與其他格式圖片相比，尺寸更小，可壓縮性強。
SVG 可任意伸縮。
SVG 圖像可以隨意地高質量打印。
SVG 圖像可以添加文本和事件，還可搜索，適合做地圖。
SVG 是純粹的 XML，不是 HTML5。
SVG是W3C標準

二、SVG 形狀元素

2.1、svg 標簽

SVG 的代碼都放到 svg 標簽呢，SVG 中的標簽都是閉合標簽，與html中標簽用法一致。svg的屬性有：

有width和height，指定了svg的大小。

eg：畫一條直線，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 設置的寬高沒有帶單位，此時默認是像素值，如果需要添加單位時，除了絕對單位，也可以設置相對單位。

viewBox 屬性

使用語法：<svg viewBox=" x1,y1,width,height "></svg>

四個參數分別是左上角的橫縱坐標、視口的寬高。表示只看SVG的某一部分，由上述四個參數決定。

使用 viewBox 之后，相當于svg整體大小不變，只能看到 viewBox 設置部分，視覺上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代碼可以直接嵌入到 html 頁面中，也可以通過 html 的embed、object、iframe嵌入到html中。嵌入的時候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？

2.2.1、embed 嵌入：

使用語法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路徑，type 表示 embed 引入文件類型。

優點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用語法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路徑，type 表示 object 引入文件類型。

優點：所有瀏覽器都支持，支持 html、html4 和 html5。

缺點：不允許使用腳本。

2.2.3、iframe 嵌入：

使用語法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路徑，width、height、frameborder 設置的大小和邊框。

優點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 標簽直接插入 html 內容內，與其他標簽用法一致。

2.2.5、連接到svg文件：

使用 a 標簽，直接鏈接到 SVG 文件。

使用語法：<a href="line.svg">查看SVG</a>

三、SVG形狀元素

3.1、線 - line

使用語法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line標簽創建線條，(x1,y1)是起點，(x2,y2)是終點，stroke繪制黑線，stroke-width是線寬。

3.2、矩形 - rect

//使用語法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小設置
 x="50" y="50"  //可選 左上角位置，svg的左上角默認(0,0)
 rx="20" ry="50" //可選 設置圓角
 stroke-width="3" stroke="red" fill="pink" //繪制樣式控制
></rect>
</svg>

上述參數 width、height是必填參數，x、y是可選參數，如不設置的時候，默認為(0,0)，也就是svg的左上角開始繪制。rx、ry是可選參數，不設置是矩形沒有圓角。fill定義填充顏色。

3.3、圓形 - circle

// 使用語法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定義圓心 ，可選
  r="40" // 圓的半徑
  stroke="black" stroke-width="2" fill="red"/> //繪制黑框填充紅色
</svg>

上述(cx,xy)定義圓心的位置，是可選參數，如果不設置默認圓心是（0,0）。r是必需參數，設置圓的半徑。

3.4、橢圓 - ellipse

橢圓與圓相似，不同之處在于橢圓有不同的x和y半徑，而圓兩個半徑是相同的。

// 使用語法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //設置橢圓的x、y方向的半徑
  fill="purple" // 橢圓填充色
  cx="150" cy="150" //設置橢圓的圓心 ，可選參數
 ></ellipse>
</svg>

上述橢圓的兩個rx、ry兩個方向半徑是必須參數，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數，如果不設置，則默認圓心為（0,0）。

3.5、折線 - polyline

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 繪制出一個默認填充黑色的三角形 -->
 <polyline 
  points=" //點的集合
   0 ,0, // 第一個點坐標
   100,100, // 第二個點坐標
   100,200 // 第三個點坐標
    " 
  stroke="green" 
 ></polyline>
<!-- 繪制一個臺階式的一條折線 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代碼執行結果如圖所示：

需要注意的是 points 中包含了多個點的坐標，但不是一個數組。

3.6、多邊形 - polygon

polygon 標簽用來創建不少于3個邊的圖形，多邊形是閉合的，即所有線條連接起來。

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多邊形的第一點
   100,100,  //多邊形的第二點
    0,100  //多邊形的第三點
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon繪制的時候與折線有些類似，但是polygon會自動閉合，折線不會。

3.7、路徑 - path

path 是SVG基本形狀中最強大的一個，不僅能創建其他基本形狀，還能創建更多其他形狀，如貝塞爾曲線、2次曲線等。

點個關注，下篇更精彩！

SS3的新特性大致分為以下六類

1.CSS3選擇器

2.CSS3邊框與圓角

3.CSS3背景與漸變

4.CSS3過渡

5.CSS3變換

6.CSS3動畫

下面分別說一說以上六類都有哪些內容

CSS3選擇器

1.基本選擇器

基本選擇器又分為

子選擇器

相鄰兄弟選擇器

通用兄弟選擇器

群組選擇器

2.屬性選擇器

1.element[attribute]

為帶有attribute屬性的元素設置樣式

2.element[attribute='value']

為attribute='value'屬性的元素設置樣式

3.element[attribute~='value']

選擇attribute屬性值包含單詞value的元素并設置樣式

4.element[attribute*='value']

選擇attribute屬性值包含value的元素設置樣式

5.element[attribute^='value']

選擇attribute屬性值是以value開頭的元素

6.element[attribute$='value']

選擇attribute屬性值是以value結尾的元素

注意比較3和4的區別

3.偽類選擇器

動態偽類

定義：這些偽類并不存在于HTML中，只有當用戶和網站交互的時候才能體現出來。

1.錨點偽類

:link

:visited

2.用戶行為偽類

:hover

:active

:focus

3.目標偽類

:target

當我們點擊錨點鏈接時，對應id的元素會顯示在視口

4.checked狀態偽類

這里我們需要知道checkbox只能設置寬高，不能設置背景和邊框，如果想要設置那么我們需要用appearance:none;來清除input的默認樣式

CSS3結構類：nth選擇器

：first-child/last-child

語法 element:first-child

選擇屬于父元素的首個/最后一個子元素的每個element元素，注意element為子元素。

：nth-child(n)

選擇某元素下的第n個element元素（n是一個簡單的表達式，不能用其他的字母代替），括號里還可以傳odd和even兩個關鍵字

：nth-last-child(n)

匹配屬于某元素下的第n個element子元素，從最后一個子元素開始計數

：nth-of-type(n)

語法 element:nth-of-type(n)

匹配屬于父元素的特定類型的第n個子元素,element為指定類型的子元素

:nth-last-of-type

匹配屬于父元素的特定類型的第n個子元素，從最后一個計數

:first-of-type/:last-of-type

匹配屬于其父元素的特定類型的首個/最后一個子元素的每個元素

：only-child

匹配屬于父元素的唯一子元素的每個元素

：only-of-type

匹配屬于其父元素特定類型的唯一子元素的每個元素

：empty

匹配沒有子元素（包括文本節點）的每個元素

否定選擇器：not

定義：匹配非元素或者選擇器的每個元素

語法：父元素：not(子元素或者選擇器)

例：ul:not(span){}

偽元素(也可以使用：)

element::first-line

定義：對元素的第一行文本進行設置，只能用于塊級元素

element::first-letter

定義：用于向文本的首字母設置特殊樣式，只能用于塊級元素

element::before

定義：在元素的內容前面插入新內容，常與content配合使用

element::after

定義：在元素的內容后面插入新內容，常與content配合使用

element::selection

定義：用于設置瀏覽器中選中文本后的背景色與前景色

圖片描述

偽元素與元素的區別:

無法通過JS獲取其DOM

無法通過瀏覽器開發者工具直接查看

偽元素默認是 inline

使用偽元素注意事項：

1.使用偽元素before,after必須設置content

2.使用偽元素before,after顯示背景圖，一定要使用display設置為塊元素

3.使用偽元素before,after設置為display:inline-block,需要再次設置vertical-align:middle

CSS3邊框與圓角

1.CSS3圓角border-radius

定義：可以為元素添加圓角邊框（塊元素，行內塊元素，行內元素）

屬性：

border-top-left-radius 左上角

border-top-right-radius 右上角

border-bottom-right-radius 右下角

border-bottom-left-radius 左下角

復合屬性：border-radius：

屬性值

四個值：左上角右上角右下角左下角

三個值：左上角右上角和左下角右下角

兩個值：左上角和右下角右上角和左下角

一個值：4個角都生效

border-radius中的屬性值由兩個參數值構成: value1 / value2，值之間用/分隔，value1代表圓角的水平半徑，value2代表圓角的垂直半徑。

圖片描述

圓形與橢圓：

一旦使用百分比，參照的是元素本身的高度與寬度

當拿50%時，寬等于高為圓形寬不等于高為橢圓形

2.盒陰影box-shadow

定義：可以控制一個或多個下拉陰影的框

語法：box-shadow: 水平方向的偏移量垂直方向的偏移量模糊程度擴展程度顏色是否具有內陰影

屬性值的介紹：

偏移量：

把元素左上角（0，0）作為基準點，找水

平方向和垂直方向的偏移量

水平：正值 --- 右，負值 --- 左

垂直：正值 --- 下，負值 --- 上

模糊程度：

邊界模糊，但是邊界線未動

由邊界線向外模糊多少像素

擴展程度：

盒子陰影，上下左右都向外擴展多少像素

是否具有內陰影：

inset(默認沒有，也就是默認是外陰影)

加上inset,盒子的陰影為內陰影

擴展程度可為負值，但是模糊程度不可以

CSS3背景與漸變

1.CSS3背景

background-image

語法：

backgroundimage:url('1.jpg),url('2.jpg')

使用逗號把圖片分開

注意：元素引入多個背景圖片，前面圖片會覆蓋后面的圖片

background-cilp

定義：指定背景的繪制區域（裁剪）

語法：

background-cilp：border-box / padding-box / content-box

屬性介紹：

border-box：背景被裁剪到邊框盒（從邊框開始繪制背景圖片）---默認

padding-box：背景被裁剪到內邊距框（從內邊距開始繪制背景圖片）

content-box：背景被裁剪到內容框

background-origin

定義：設置背景圖像的原始起始位置

語法：

background-origin：border-box / padding-box / content-box(背景圖片坐標原點與這三個有關系)

屬性的介紹：

border-box：相對于邊框來定位

padding-box：相對于內邊距來定位

content-box：相對于內容框來定位

另外有一個需要了解

background-position:定義背景圖片的位置，水平與垂直方向上面的偏移量(參考點)

background-repeat

定義：設置是否及如何重復背景圖像，默認地，背景圖像在水平和垂直方向上重復。

屬性值：

repeat 默認。背景圖像將在垂直方向和水平方向重復。

repeat-x 背景圖像將在水平方向重復。

repeat-y 背景圖像將在垂直方向重復。

no-repeat 背景圖像將僅顯示一次。

inherit 規定應該從父元素繼承 background-repeat 屬性的設置

background-size

定義：指定背景圖像的大小

語法：

background-size：number / % / cover / contain

屬性介紹：

number: 寬度高度（如果只寫一個數值，第二個數值默認auto）

百分比： 0% - 100% 之間的任何值，此時的百分比參照于元素div的大小

cover：將背景圖片等比縮放以填滿整個容器（最遠邊），如果高度達到一定比例100%，寬度多出的會溢出，但是，具體那部分溢出取決于定位

contain：將背景圖片等比縮放至某一邊緊貼容器邊緣為止（最近邊），如果圖片高度比較小，高度就會有空白區域出現

復合屬性background

定義：可以在一個聲明中設置所有的背景屬性

語法：

background：color position size repeat origin clip attachment image; background: #abc center 50% no-repeat content-box content-box fixed url('1.jpg') ,url('2.jpg')...

2.CSS3漸變

定義：可以在兩個或者多個指定顏色之間顯示平移的過渡

線性漸變

定義：是沿著一根軸線改變顏色，從起點到終點進行順序漸變（從一邊拉向另一邊）

語法：background:linear-gradient(方向，開始顏色，結束顏色)

方向介紹：

1.方向從上到下（默認）

background: linear-gradient(red,blue);

2.方向從左到右

background: linear-gradient(to right,red,blue);

3.對角

background: linear-gradient(to right bottom,red,blue);

4.角度(單位deg)

background: linear-gradient(角度,red,blue);

角度說明：0deg 將創建一個從下到上的漸變，90deg將創建一個從左到右的漸變

顏色結點：默認每個顏色均勻分布

background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);

從0%到10%，為紅色，從10%到20%為紅色到藍色的漸變，從20%到30%為藍色到綠色的漸變，從30%到40%，為綠色到黃色的漸變,從40%到100%為黃色

background: linear-gradient(red 10%,blue);

從0%到10%，為紅色，從10%到100%為紅色到藍色的漸變

最后如果不寫具體數值，默認到100%

background: linear-gradient(red,blue 30%);

從0%到30%，為紅色到藍色的漸變

如果第一個不寫，默認數值是 0%

background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1));

由透明色變為不透明色

重復漸變

示例：background: repeating-linear-gradient(90deg,red 0%,blue 20%);或者 background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);

注意：把元素的整體寬度看成100%

徑向漸變

定義：從起點到終點，顏色從內向外進行圓形漸變

語法：background:radial-gradient(形狀尺寸，開始顏色，結束顏色)

形狀分類：

circle --- 圓形

ellipse --- 橢圓形

注意：當元素的高和寬一樣時，參數無論設置哪個，都是圓形

尺寸大小：

closest-side最近邊

background: radial-gradient(closest-side circle,red , blue);

farthest-side 最遠邊

background: radial-gradient(farthest-side circle,red , blue);

closest-corner最近角

background: radial-gradient(closest-corner circle,red , blue);

farthest-corner最遠角

background: radial-gradient(farthest-corner circle,red , blue);

顏色結點：

例：

background:radial-gradient(circle,red 50% ,blue 70%);

注意：此時的百分比,指的是圓心到元素最遠端的距離（角度）

重復漸變：

示例： background: repeating-radial-gradient(red 0%,blue 20%);

background: repeating-radial-gradient(red 0%,blue 10%,red 20%);

CSS3過渡

定義：允許css的屬性值在一定時間區間內平滑的過渡，在鼠標點擊，鼠標滑過或對元素任何改變中觸發，并圓滑地以動畫形式改變css的屬性值。

屬性：

1.transition-property屬性

定義：設置對象中的參與過渡的屬性

語法：transition-property：none | all | property

參數說明：

none：沒有屬性改變

all : 默認值，所有屬性都改變

property：元素的屬性名 width,color等

2.transition-duration屬性

定義: 設置對象過渡的持續時間

語法：transition-duration：time

參數說明：

規定完成過渡效果需要花費的時間，以秒或者毫秒計，默認值0

3.transition-timing-function屬性

定義：設置對象中過渡的動畫類型

語法：只能使用一個屬性值

參數說明：

ease:平滑過渡（0--慢--快--慢），默認值

cubic-bezier(0.25,0.1,0.25,1)

linear:線性過渡（勻速） cubic-bezier(0,0,1,1)

ease-in:慢--快 cubic-bezier(0.42,0,1,1)

ease-out:快--慢 cubic-bezier(0,0,0.58,1)

ease-in-out:慢--快--慢

cubic-bezier(0.42,0,0.58,1)

貝塞爾曲線 :http://cubic-bezier.com/#.17,...

4.transition-delay屬性

定義：設置對象延遲的過渡時間

語法：transition-delay：time

參數說明：

指定秒或者毫秒數來延遲動畫效果的開始，默認是0

5.transition復合屬性

語法：

transition ： property duration timing-function delay；

參數說明：過渡時間和延遲時間的順序不能亂

CSS3變換

定義：讓一個元素在一個坐標系統中變形，這個屬性包含一系列的變形函數，可以移動，旋轉，縮放元素。

語法：transform：none | <transform-function> 默認值是none

2d變換

1.rotate()旋轉

定義：通過指定一個角度參數，對元素指定一個2D的旋轉

語法：transform：rotate(angle) 單位deg

參數說明：angle指旋轉角度，正數表示順時針旋轉，負數表示逆時針旋轉

2.translate()平移

定義：根據X軸和Y軸的位置給定參數，使當前元素位置移動

分類：

translateX() 僅水平方向移動

語法：transform：translateX() 單位px

translateY() 僅垂直方向移動

語法：transform：translateY() 單位px

translate(x,y) 水平方向和垂直方向同時移動

語法：transform：translate( X, Y) 單位px

注意：如果只寫一個參數，第二個默認是0，也就是只設置了水平方向上的位移

3.scale( )縮放

定義：設置元素的縮放程度

分類：

scaleX( ) 僅水平方向縮放

語法：transform：scaleX() 沒有單位

scaleY( ) 僅垂直方向縮放

子主題語法：transform：scaleY() 沒有單位

scale(x,y) 使元素水平和垂直方向同時縮放

語法：transform：scale(x,y) 沒有單位

4.skew()扭曲/傾斜

定義：設置元素的傾斜狀態

分類：

skewX( ) 僅使元素在水平方向上扭曲變形單位deg 正值 ----逆時針

skewY( ) 僅使元素在垂直方向上扭曲變形單位deg 正值 ----順時針

skew( ) 使元素在水平方向和垂直方向上扭曲變形單位deg

注意：0deg與180deg 效果一樣

5.變換基點

定義：元素變換的基準點

語法： transform-origin：水平方向垂直方向

參數說明：

left top 左上角 ----四個角均可以

25% top

50px 50px

默認值：

rotate 幾何中心點

skew 幾何中心點

scale 幾何中心點

translate 本身位置

3d變換

1.開啟3d空間transform-style: preserve-3d; 一般給父元素開啟

2.子元素設置3d變換效果

rotate

rotateX()

定義：指對象在X軸上的旋轉角度（變換基點： 50% 50% 0）

rotateY()

定義：指對象在Y軸上的旋轉角度（變換基點： 50% 50% 0）

rotateZ()

定義：指對象在Z軸上的旋轉角度（變換基點： 50% 50% 0）

translate

translateZ()

定義：指對象在Z軸上面的平移（變換基點： 50% 50% 0）

scale

scaleZ()

定義：指定對象的Z軸縮放（變換基點： 50% 50% 0）(無太大意義，開啟3d空間)

3.設置景深：實現近大遠小

父元素子元素都可以設置

父元素：perspective: 300px;

子元素:

transform:perspective(300px) translateZ(-200px);

注意：景深：可選值：大于或等于0,景深值越大，元素看起來越大

默認值: 0 -- 沒有景深（不能為負值）

4.變換基點

默認值： 50% 50% 0

transform-origin: top; 關鍵字表示 ( 50% 0 0 )

注意：立體3d盒子 Z：只能使用具體的長度，不能使用百分比和關鍵字

5.景深中心點：改變觀察者視角

perspective-origin: top;

perspective-origin: top right;

6.元素背面可見還是不可見

backface-visibility:visible ;（默認值：可見）

backface-visibility: hidden; 不可見

CSS3動畫

定義：使元素從一種樣式逐漸變化到另外一種樣式的效果

@keyframes

定義：keyframes關鍵幀，用來決定動畫變化的關鍵位置

注意：keyframes 控制關鍵位置，并不是所有的位置

語法：@keyframes animationname{

keyframes-selector{

cssStyles;

}

animationname：必寫項，定義動畫的名稱

keyframes-selector：必寫項，動畫持續時間的百分比 0% - 100%之間，或者使用form和to關鍵字也可以設置，form代表0%，to代表100%

示例：

@keyframes abc {

from{transform: rotate(0)}

50%{transform:rotate(90deg)}

to{transform: rotate(360deg)}

}

animation屬性

1.animation-name屬性

設置對象所應用的動畫名稱

語法：

animation-name：keyframename | none

參數說明：

keyframename：指定要綁定到選擇器的關鍵幀的動畫名稱

2.animation-duration屬性

定義：設置對象動畫的持續時間

語法：animation-duration：time

參數說明：指定對象播放完成需要花費的時間，默認值是0

3.animation-timing-function屬性

定義：設置對象動畫的過渡類型

參數說明：與transition-timing-function屬性的參數一樣

4.animation-delay屬性

定義：設置動畫的延遲時間

語法：animation-delay：time

參數說明：可選值，定義動畫開始前等待的時間，以秒或者毫秒數計數，默認值是0

5.animation-iteration-count屬性

定義：設置對象動畫的循環次數

語法：animation-iteration-count ： infinite | number

參數說明：

number為數字，其默認值是1

infinite：無限循環次數

6.animation-direction屬性

定義：設置對象動畫是否反向運動

語法：

animation-direction：normal , reverse , alternate , alternate-reverse

參數說明：

normal : 正常方向

reverse :反向運動

alternate ：先正常運動在反向運動，并持續交替運行，需要配合循環屬性使用

alternate-reverse ：先反向運動在正常運動，并持續交替運行，需要配合循環屬性使用

7.animation-play-state屬性

定義：指定對象是否正在運行或已暫停

語法：animation-play-state：paused | running

參數說明：

paused ：指定暫停動畫

running : 默認值，制定正在運行的動畫

示例：鼠標移動到box上暫停動畫

#box:hover{

animation-play-state: paused;

}

8.animation-fill-mode

設置動畫結束后的狀態

none：默認值。不設置對象動畫之外的狀態，DOM未進行動畫前狀態

forwards：設置對象狀態為動畫結束時的狀態，100%或to時，當設置animation-direcdtion為reverse時動畫結束后顯示為keyframes第一幀

backwards：設置對象狀態為動畫開始時的狀態,（測試顯示DOM未進行動畫前狀態）

both：設置對象狀態為動畫結束或開始的狀態，結束時狀態優先

9.animation復合屬性（不推薦使用）

語法：

animation ： name duration timing-function delay interation-count direction play-state

注意：在css3里面，給元素設置圓角、陰影、變換等屬性時，盡管外形位置發生改變，但是元素本身大小和位置不變

在線咨詢

上一篇：Dreamweaver cs6 網頁設計教程
下一篇：上海HTML5開發培訓機構大咖分享html虛線邊框設置教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一篇文章帶你了解CSS3圓角知識

、瀏覽器支持

二、border-radius 屬性

1. 創建具有背景圖的圓角

2. 為每個角指定弧度

實例1：

實例2：

三、總結

一、為什么要學 SVG ?

二、SVG 形狀元素

三、SVG形狀元素

您的項目需求