CSS3略談（中）

阿新 • • 發佈：2017-05-05

縮小 asc class -o col cell back opera translate

一、漸變

漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少圖片的使用數量，並且具有很強的適應性和可擴展性。可分為線性漸變、徑向漸變

1、 linear-gradient線性漸變指沿著某條直線朝一個方向產生漸變效果

語法：

linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

參數說明：

　　1-1、第一個參數表示線性漸變的方向

1. to left：設置漸變為從右到左。相當於: 270deg;
2. to right：設置漸變從左到右。相當於: 90deg;
3. to top：設置漸變從下到上。相當於: 0deg;
4. to bottom：設置漸變從上到下。相當於: 180deg。這是默認值，等同於留空不寫。也可以直接指定度數，如45deg

　　1-2、第二個參數是起點顏色,可以指定顏色的位置

　　1-3、第三個參數是終點顏色，你還可以在後面添加更多的參數，表示多種顏色的漸變

示例：

div{
    width: 400px;
    height: 400px;
    margin: 100px auto;
    background: linear-gradient(0deg,red,orange,yellow,green,  #00ffff,blue,purple) 
;
}

2、 radial-gradient徑向漸變指從一個中心點開始沿著四周產生漸變效果

語法：

<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

取值：

<position> 確定圓心的位置。如果提供2個參數，第一個表示橫坐標，第二個表示縱坐標；如果只提供一個，第二值默認為50%，即center
shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣
size：漸變的大小，即漸變到哪裏停止，它有四個值。 closest-side：最近邊； farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角。默認是最遠的角farthest-corner
<color>：指定顏色。Rgba hsla

一些案例示例代碼：

.div1{
        width: 200px;
        height: 200px;
        margin: 10px auto;
        /*設置徑向漸變效果:從中心點開始，從一種顏色到另外一種顏色*/
        background: radial-gradient(circle at center,red,blue);
    }
    .div2{
        width: 200px;
        height: 200px;
        border-radius: 100px;
        margin: 10px auto;
        /*設置徑向漸變效果:從指定坐開始，從一種顏色到另外一種顏色*/
        background: radial-gradient(circle at 50px 50px,#eeffff,#334455);
    }
    .div3{
        width: 200px;
        height: 200px;
        border-radius: 100px;
        margin: 10px auto;
        /*設置徑向漸變效果:從指定坐標開始，從一種顏色到另外一種顏色，同時指定顏色的位置*/
        background: radial-gradient(circle at 50px 50px,#eeffff 0%,#666 70%,rgba(33,33,33,0.8) 80%);
    }
    /*指定漸變的形狀*/
    .div4{
        width: 200px;
        height: 100px;
        margin: 10px auto;
        /*設置徑向漸變效果:從中心點開始，從一種顏色到另外一種顏色*/
        background: radial-gradient(ellipse at center,red,green,blue);
    }
    /*指定漸變的size*/
    .div5{
        width: 200px;
        height: 100px;
        margin: 10px auto;
        /*設置徑向漸變效果:從中心點開始，從一種顏色到另外一種顏色,同時指定了大小為漸變到最近的邊*/
        background: radial-gradient(circle closest-side at center,red,green,blue);
    }
    /*使用系統提供的位置設置*/
    .div6{
        width: 200px;
        height: 100px;
        margin: 10px auto;
        /*設置徑向漸變效果:從右上角點開始，從一種顏色到另外一種顏色*/
        background: radial-gradient(circle at top right,red,green,blue);
    }
</style>

二、背景

background-size屬性：

CSS裏的background-size屬性能夠讓程序員決定如何在指定的元素裏展示,它通過改變背景尺寸的通過各種不同是屬性值改變背景尺寸呈現的大小。往往建議不要將圖放大，如果有需要，盡量讓圖縮小

語法：

background-size: auto(原始圖片大小) || number(數值) || percentage(百分比) || cover(放大鋪滿) || contain(縮小鋪滿)

參數說明：

auto：此值為默認值，保持背景圖片的原始高度和寬度;
number：此值設置具體的值，可以改變背景圖片的大小;
percentage：此值為百分值，可以是0%?100%之間任何值，但此值只能應用在塊元素上，所設置百分值將使用背景圖片大小根據所在元素的寬度的百分比來計算。
cover：此值是將圖片放大，以適合鋪滿整個容器，這個主要運用在，當圖片小於容器時，又無法使用background-repeat來實現時，我們就可以采用cover;將背景圖片放大到適合容器的大小
contain：此值剛好與cover相反，其主要是將背景圖片縮小，以適合鋪滿整個容器，這個主要運用在，當背景圖片大於元素容器時，而又需要將背景圖片全部顯示出來，此時我們就可以使用contain將圖片縮小到適合容器大小為止。
當background-size取值為number和percentage時可以設置兩個值，也可以設置一個值，當只取一個值時，第二個值相當於auto，但這裏的auto並不會使背景圖片的高度保持自己原始高度，而是會參照第一個參數值進行等比例縮放。

使用案例：

<style>

    *{
        padding: 0;
        margin: 0;
    }
    .div1{
         width: 200px;
         height: 200px;
         margin:10px auto;
         /*默認的背景設置，會讓背景圖片從左上角原點位置進行設置，不會自動的讓背景圖片適應容器的大小從而進行縮放*/
         background: url("../images/1.jpg");
     }
    .div2{
        width: 200px;
        height: 200px;
        margin:10px auto;
        background: url("../images/1.jpg");
        /*設置背景圖片的大小,指定大小，有可能會讓背景圖片變形*/
        background-size: 200px 200px;
    }
    .div3{
        width: 200px;
        height: 200px;
        margin:10px auto;
        background: url("../images/1.jpg");
        /*設置背景圖片的大小,cover:會讓寬或者高適應當前容器的寬或者高，進行等比例縮放，但是超出的部分不會顯示，所以有些圖片的區域可能會無法顯示*/
        background-size: cover;
    }
    .div4{
        width: 200px;
        height: 200px;
        margin:10px auto;
        background: url("../images/1.jpg") no-repeat;
        /*設置背景圖片的大小,cover:會讓寬或者高適應當前容器的寬或者高，進行等比例縮放，圖片完全在容器以內，但是在不重復背景圖片的情況下，會造成容器的部分區域空白*/
        background-size: contain;
    }
</style>

background-origin:

作用：background-origin 屬性規定 background-position 屬性相對於什麽位置來定位。默認值是left top左上角
語法：background-origin: padding-box|border-box|content-box;
屬性值說明：

padding-box	背景圖像相對於內邊距框來定位。
border-box	背景圖像相對於邊框盒來定位。
content-box	背景圖像相對於內容框來定位。

background-clip:

background-clip 屬性規定背景的繪制區：雖然是設置裁切，但是控制的是顯示。說白了，就是設置最終顯示那些區域
語法：background-clip: border-box|padding-box|content-box;
屬性值說明：

值	描述
border-box	背景被裁剪到邊框盒。
padding-box	背景被裁剪到內邊距框。
content-box	背景被裁剪到內容框。

幾個屬性的綜合案例：精靈圖的使用。

1、需求：為塊設置精靈圖背景，需要更大的展示區域，能夠以更大的範圍響應用戶的需要，但是只需要顯示指定的背景圖片

2、代碼：

.jd_topEeum {
    height: 44px;
    width: 40px;
    position: absolute;
    background: url("../images/sprites.png") no-repeat;
    background-clip: content-box;
    background-origin: content-box;
    background-size: 200px 200px; 
    padding: 12px;
    top: 0;
}

三、過渡

通過過渡transition,我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果. 要實現這一點，必須規定兩項內容：1.規定希望把效果添加到哪個 CSS 屬性上，2.規定效果的時長

1、語法：

transition: property duration timing-function delay;

2、參數說明：

transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：transition-property |transition-duration |transition-timing-function |transition-delay

值	描述
transition-property	規定設置過渡效果的 CSS 屬性的名稱。
transition-duration	規定完成過渡效果需要多少秒或毫秒。
transition-timing-function	規定速度效果的速度曲線。
transition-delay	定義過渡效果何時開始。

補充說明tansition-timing-function: 屬性規定過渡效果的速度曲線

值	描述
linear	規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
ease	規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,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)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

1、案例說明

div{
    width: 200px;
    height: 200px;
    background-color: red;
    /*添加單個過渡效果*/
    /*transition:background-color 2s;*
    /*也可以同時設置多個過渡效果*/
    /*transition:background-color 2s,left 1s;*/
    /*可以設置某個過渡效果的延遲*/
    /*transition:background-color 2s,left 1s 1s;*/
    /*可以設置過渡效果的速率曲線*/
    /*transition:background-color 2s,left 1s ease-out 1s;*/
    /*還可以一次性的為所有屬性添加過渡效果*/
    transition:all 1s;
    position: absolute;
    left: 0;
    top: 0;
}

2、使用建議：

因為transition最早是有由webkit內核瀏覽器提出來的，mozilla和opera都是最近版本才支持這個屬性，而我們的大眾型瀏覽器IE全家都是不支持，另外由於各大現代瀏覽器Firefox,Safari,Chrome,Opera都還不支持W3C的標準寫法，所以在應用transition時我們有必要加上各自的前綴，最好在放上我們W3C的標準寫法，這樣標準的會覆蓋前面的寫法，只要瀏覽器支持我們的transition屬性，那麽這種效果就會自動加上去，如

-moz-transition: all 5s ease 1s;

-webkit-transition: all 1s ease 1s;

-o-transition: all 1s ease 1s;

transition: all 1s ease 1s;

四、2D轉換

通過 CSS3 transform轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸.

1、2D移動：translate()。使用translate()函數，你可以把元素從原來的位置移動。移動參照元素左上角原點

語法：translate(tx) | translate(tx,ty)
tx是一個代表X軸（橫坐標）移動的向量長度，當其值為正值時，元素向X軸右方向移動，反之其值為負值時，元素向X軸左方向移動。
ty是一個代表Y軸（縱向標）移動的向量長度，當其值為正值時，元素向Y軸下方向移動，反之其值為負值時，元素向Y軸上方向移動。如果ty沒有顯式設置時，相當於ty=0。
也可以使用translateX(tx) 或者 translateY(ty)

案例示例：

div:hover{
    /*設置兩個值，第一個參數表示X方向  第二個參數表示Y方向*/
    /*transform: translate(100px,100px);*/
    /*也可以只傳入一個參數，表示X方向*/
    /*transform: translate(100px);*/
    /*也可以指定具體的方向,如下代碼，表示Y方向正值方向上移動100px*/
    transform:translateY(100px);
}

2、2D縮放：scale()：縮放scale()函數讓元素根據中心原點對對象進行縮放。默認的值1。因此0.01到0.99之間的任何值，使一個元素縮小；而任何大於或等於1.01的值，讓元素顯得更大.縮放是參照元素中心點。

語法：scale(sx|ty) | scale(sx,sy)
sx：用來指定橫向坐標（X軸）方向的縮放向量，如果值為0.01~0.99之間，會讓對象在X軸方向縮小，如果值大於或等於1.01，對象在Y軸方向放大。
sy：用來指定縱向坐標（Y軸）方向的縮放量，如果值為0.01~0.99之間，會讓對象在Y軸方向縮小，如果值大於或等於1.01，對象在Y軸方向放大
也可以使用scaleX(sx) 或者scaleY(sy)

案例示例：

div:hover{
    /*傳入兩個值，第一個參數表示X方向的縮放 第二個參數表示Y方向上的縮放*/
    /*transform: scale(2,0.5);*/
    /*也可以只傳入一個值，表示X方向和Y方向上相同的縮放*/
    /*transform: scale(2);*/
    /*也可以指定具體方向上的縮放*/
    transform: scaleX(2);
}

3、2D旋轉：rotate()：旋轉rotate()函數通過指定的角度參數對元素根據對象原點指定一個2D旋轉。它主要在二維空間內進行操作，接受一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉

語法：rotate(a);
a: 代表的是一個旋轉的角度值。其取值可以是正的，也可以是負的。如果取值為正值時，元素默認之下相對元素中心點順時針旋轉；如果取值為負值時，元素默認之下相對元素中心點逆時針旋轉

案例示例：

div:hover{
    /*傳入旋轉的角度，如果正值，則進行順時針旋轉*/
    /*transform: rotate(90deg);*/
    /*如果傳入負值，則逆時針旋轉*/
    transform: rotate(-270deg);
}

4、2D翻轉：skew()：能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀

語法：skew(ax) | skew(ax,ay)
ax：用來指定元素水平方向（X軸方向）傾斜的角度。
ay：用來指定元素垂直方向（Y軸方向）傾斜的角度。如果未顯式的設置這個值，其默認為０。
也可以使用skewX(sx) 或者 skewY(sy)

案例示例：

div:hover{
    /*在X方向上傾斜30度*/
    transform: skewX(30deg);
}

transform-origin: 允許你改變被轉換元素的位置。

示例：

div{
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background-color: red;
    /*添加過渡*/
    transition:all .5s;
    /*設置縮放的中心，默認是元素中心位置,現修改為元素左上角*/
    transform-origin: 0px 0px;
}
div:hover{
    transform: scale(2);
}

CSS3略談（中）

縮小 asc class -o col cell back opera translate 一、漸變漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少圖片的使用數量，並且具有很強的適應性和可擴展性。可分為線性漸變、徑向漸變 1、 l

CSS3略談（中）

CSS3略談（中）

css3屬性總結（中）

淺談線程池（中）：獨立線程池的作用及IO線程池

C#淺談執行緒池（中）：獨立執行緒池的作用及IO執行緒池

Android程序保活全攻略（中）

ThreadPoolExecutor的應用和實現分析（中）—— 任務處理相關源碼分析

白話空間統計之五：空間關系的概念化（中）

SQLAlchemy技術文檔（中文版）（中）

java之IO整理（中）

C語言攻略指南（三）流程控制篇

手把手教你玩轉 CSS3 3D 技術（轉載）

CSS3-loading動畫（五）

Python學習：基本數據類型與變量（中）與基礎之條件及循環（上）

CSS3總結學習（一）：CSS3用戶界面

【轉載】CSS3之Clip（裁剪）拓展閱讀

Spark入門實戰系列--2.Spark編譯與部署（中）--Hadoop編譯安裝

第44課遞歸的思想與應用（中）

Django 表單（中）-動態實現select效果

線程淺談（一）

「mysql優化專題」詳解引擎(InnoDB,MyISAM)的內存優化攻略？（9）

CSS3略談（中）

相關推薦