CSS3?邊框

border-radius:?圓角

border-radius:?15px?50px?70px?100px;?左上?右上?右下?左下

box-shadow:陰影

box-shadow:1px?2px?3px?#ccc;

1px:水平位移

2px:豎直

border-image:邊框圖片

border-image:?source?slice?width?outset?repeat;

border-image:url(border.png)?30?round;

用圖片border.png?30出的地方?重復(fù)合理的重復(fù)

?stretch:默認(rèn)值。拉伸圖像來填充區(qū)域

?repeat:平鋪（repeated）圖像來填充區(qū)域

?round:類似?repeat?值。如果無法完整平鋪所有圖像，則對(duì)圖像進(jìn)行縮放以適應(yīng)區(qū)域。

?

border-image-source:于指定要用于繪制邊框的圖像的位置

border-image-slice:圖像邊界向內(nèi)偏移

border-image-width:圖像邊界的寬度

border-image-outset:用于指定在邊框外部繪制?border-image-area?的量

border-image-repeat:這個(gè)例子演示了如何創(chuàng)建一個(gè)border-image?屬性的按鈕

?

CSS3?背景

background-size:設(shè)置背景圖標(biāo)大小

background-size:80px?60px;?//原圖縮小為：80x60的

background-size:100%?100%;

background-Origin屬性指定了背景圖像的位置區(qū)域。當(dāng)背景過大，或者屬性為?repeat?區(qū)別可能不大

border-box:邊框

padding-box:

content-box

?

CSS3?漸變（Gradients）

linear-gradient//線性漸變(向下/向上/向左/向右/對(duì)角方向)?linear-gradient

radial-gradient//徑向漸變(由它們的中心定義)?radial

background:?linear-gradient(direction,?color-stop1,?color-stop2,?...);

默認(rèn)情況從上到下

?

background:-moz-linear-gradient(right,red,blue);/*?Firefox?3.6?-?15?*/

???????????-o-liner-gradient()///*?Opera?11.1?-?12.0?*/

???????????-webkit-linear-gradient()///*?Safari?5.1?-?6.0?*/

?

background:linear-gradient(to?bottom?right,?red?,?blue);左上角到右下角???

background:linear-gradient(to?right,?red,?blue);//(標(biāo)準(zhǔn)語法必須在最后)標(biāo)志有to?否則加前綴??

使用角度

background:linear-gradient(60deg,red,blue,green)??

重復(fù)的線性漸變

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

透明漸變

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

?

?

CSS3?徑向漸變

background:?radial-gradient(center,?shape?size,?start-color,?...,?last-color);

center:位置?50%?50%表是居中，默認(rèn)居中

shape?size：從小到大（）closest-side?farthest-side?closest-corner?farthest-corner

?background:?-moz-radial-gradient(60%?55%,?closest-side,blue,green,yellow,black);

當(dāng)能設(shè)置形狀的時(shí)候，就不能與設(shè)置位置?大小一起shiyo9ng

?background:?radial-gradient(circle,?red,?yellow,?green);

//circle:圓形?默認(rèn)：ellipse?橢圓

?

重復(fù)的徑向漸變

?background:?-moz-repeating-radial-gradient(red,yellow?10%,green?15%)

?background:?repeating-radial-gradient(red,?yellow?10%,?green?15%);

?

?顏色：rgba(R,G,B,A);?A?表示透明度?0%?-?100%

?color：rgba(R,G,B,A)

?

?

?

?CSS3?文本效果

?text-shadow:屬性適用于文本陰影

?text-shadow:5px?5px?5px?類似于?box-shadow:

?

?word-wrap屬性允許長(zhǎng)的內(nèi)容可以自動(dòng)換行

?word-wrap:?normal|break-word;

?normal?只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）。默認(rèn)

?break-word:在長(zhǎng)單詞或?URL?地址內(nèi)部進(jìn)行換行。

?

?

?

?字體：

?@font-face

{

font-family:?myFirstFont;

src:?url(sansation_light.woff);//需要下載字體

}

div{

font-family:myFirstFont;

}

?

?@font-face{

?font-family:myfont;

?src:url();

?}

?.pyt{

?font-family:myfont;

?}

?

?

?CSS3?2D?轉(zhuǎn)換(Internet?Explorer?10,?Firefox,?和?Opera支持transform?屬性.)

?transform

?div{

?transform:translate()/rorate()/scale()/skew()/matrix()

?}

?translate()方法：根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng)

?transform:translate(50px,100px);

?-ms-transform:translate(50px,100px);/*?IE?9?*/

-webkeit-transform:?/*?Safari?and?Chrome?*/

?

rotate()方法，在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時(shí)針旋轉(zhuǎn)。

translate:rotate(30deg);順時(shí)針轉(zhuǎn)動(dòng)30度

?

scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)：

translate:scale(2,4)//橫向變大2倍，縱向變大4倍

?

skew()方法，該元素會(huì)根據(jù)橫向（X軸）和垂直（Y軸）線參數(shù)給定角度：（會(huì)有扭曲的效果）

translate:skew(30deg,50deg);

?

matrix()方法和2D變換方法合并成一個(gè)。（等待研究）

matrix?方法有六個(gè)參數(shù)，包含旋轉(zhuǎn)，縮放，移動(dòng)（平移）和傾斜功能。

transform:matrix(a,b,c,d,e,f);

transform:matrix(0.586,0.8,-0.8,0.586,40,30);

a:0<a<1?如?0.586，0.686，0.786

b:0<b<1?如：0.5

c:-1<c<1?如：-0.5?旋轉(zhuǎn)

d:0<d<1?傾斜

e:x軸的距離?left

f:y軸的距離相對(duì)于?top:

?

?

?

box-sizing:border-box;

方框大小調(diào)整(Box?Sizing)

box-sizing:border-box;?定義border?的寬度不例外添加;

?

?

outline：外邊框

outline-offset:?外邊框的距離

outline:2px?solid?red;

outline-offset:15px;

?

?

過度：transition?過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。

?

transition:property?duration?function?delay

property:css的屬性

duration:定義花費(fèi)時(shí)間?默認(rèn)：0

function:億什么方式實(shí)現(xiàn)??默認(rèn)?ease

單獨(dú)拿出來：

transition-timing-function:

linear:規(guī)定以相同速度開始至結(jié)束的過渡效果?cubic-bezier(0,0,1,1)

ease:規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果?cubic-bezier(0.25,0.1,0.25,1)

ease-in:規(guī)定以慢速開始的過渡效果?cubic-bezier(0.42,0,1,1)

ease-out:規(guī)定以慢速結(jié)束的過渡效果?cubic-bezier(0.42,0,0.58,1)

ease-in-out:規(guī)定以慢速開始和結(jié)束的過渡效果

cubic-bezier(n,n,n,n)?在?cubic-bezier?函數(shù)中定義自己的值。可能的值是?0?至?1?之間的數(shù)值

cubic-bezie(n,n,n,n)特殊研究一下

?

delay:延遲多少執(zhí)行

transition-delay:2s;

-webket-transition-delay:2s;

?

例如：transition:width?2s?ease?1;

?

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

?}

?

?div發(fā)生hover事件的時(shí)候，

?width:100px?-?200px?需要2s中的變化

?transform的反轉(zhuǎn)180度也需要2s中過度

?

?

?動(dòng)畫：@keyframes?animation?通過from?to?或者?50%?百分比

?animation-name?屬性為?@keyframes?動(dòng)畫指定名稱。

?

?animation-duration:規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是?0。

?animation-timing-function:類似過度?transition-timing-function

?linear:規(guī)定以相同速度開始至結(jié)束的過渡效果?cubic-bezier(0,0,1,1)

?ease:規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果?cubic-bezier(0.25,0.1,0.25,1)

?ease-in:規(guī)定以慢速開始的過渡效果?cubic-bezier(0.42,0,1,1)

?ease-out:規(guī)定以慢速結(jié)束的過渡效果?cubic-bezier(0.42,0,0.58,1)

?ease-in-out:規(guī)定以慢速開始和結(jié)束的過渡效果

?cubic-bezier(n,n,n,n)?在?cubic-bezier?函數(shù)中定義自己的值。可能的值是?0?至?1?之間的數(shù)值

?cubic-bezie(n,n,n,n)特殊研究一下

?

animation-delay:規(guī)定動(dòng)畫什么時(shí)候開始?默認(rèn)為：0

animation-iteration-count：動(dòng)畫執(zhí)行的次數(shù)?默認(rèn)為1/infinite?標(biāo)識(shí)無限循環(huán)執(zhí)行

animation-direction:是否循環(huán)交替反向播放動(dòng)畫

??normal?默認(rèn)?正常執(zhí)行動(dòng)畫

??reverse?動(dòng)畫反向播放

??alternate?動(dòng)畫在奇數(shù)次（1、3、5...）正向播放，在偶數(shù)次（2、4、6...）反向播放。

??alternate-reverse??動(dòng)畫在奇數(shù)次（1、3、5...）反向播放，在偶數(shù)次（2、4、6...）正向播放。

??initial:設(shè)置該屬性為它的默認(rèn)值

??inherit:從父元素繼承該屬性

animation-play-state:?running(運(yùn)行)/paused(暫停);?通過調(diào)整這個(gè)屬性控制動(dòng)畫暫停

?

?

?

?

?{background:blue;}

?div

{

width:100px;

height:100px;

background:red;

animation:myfirst?5s;?//通過調(diào)用myfirst

-moz-animation:myfirst?5s;?/*?Firefox?*/

-webkit-animation:myfirst?5s;?/*?Safari?and?Chrome?*/

-o-animation:myfirst?5s;?/*?Opera?*/

}

?

?

@keyframes?myfirst{

from?{background:red;}

to?{background:blue;}

}

@keyframes?myfirst{

?0%???{background:red;}

?25%??{background:yellow;}

?50%??{background:blue;}

?100%?{background:green;}

}

@-moz-keyframes?myfirst

@-o-keyframes?myfirst

@-webkit-keyframes?myfirst??/*?Safari?and?Chrome?*/

轉(zhuǎn)載于:https://www.cnblogs.com/xqschool/p/6232683.html

總結(jié)

以上是生活随笔為你收集整理的CSS3学习基本记录的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。