CSS3必須要知道的10個頂級命令


1.邊框圓角(Border Radiuas)

這個是我們在平常很常用的吧,以前我在用div圓角的時候,特別特別的痛苦,不管是用CSS來畫圓角,還是用圖片來畫圓角都不那么容易,但是現在好了,在CSS3中,直接只需要如下面餓代碼,就能做出美輪美奐的圓角效果了~~~

復制代碼
#box1 {
border: 1px solid #699;

/* for Mozilla Firefox */
-moz-border-radius: 20px;

/* for Safari & Google Chrome */
-webkit-border-radius: 20px;
}
復制代碼

實例效果圖:

2.盒陰影(Box Shadow)

就是讓一個div能夠產生陰影效果。代碼如下:

復制代碼
#box1
{
border: 1px solid #699;
-moz-box-shadow: 5px -5px 5px #b6ebf7;
-webkit-box-shadow: 5px -5px 5px #b6ebf7;
width: 100px;
height: 100px;
margin-left: 100px;
margin-top: 100px;
background-color:Gray;
border-color:Yellow;
}
復制代碼

需要注意的是,它有4個參數:

第一個參數:水平偏移的位置,它有正數或者負數。如果是正數的話,那么表示邊框的右(right)邊產生陰影;否則如果是負數的話,那么它的左邊(left)框產生陰影效果。

第二個參數:垂直偏移的位置。它也有正數或者負數。如果是正數的話,那么表示下(bottom)邊框有陰影;否則如果是負數的話,那么它的上(top)邊框有陰影。

第三個參數:陰影的大小

第四個參數:顏色,這個很好理解。

實例效果圖:

注意上面,第二個參數,我用的是負數。

有box shadow ,還有一個屬性是text-shadow,這個主要是運用在文字上面的。

代碼如下:

復制代碼
<div style=" color: #353535; font-family: 微軟雅黑; font-size: 64px; padding:20px; font-weight:bold;">
<span style="text-shadow: -2px -2px 2px #0D0D0D, 0px 0px 5px #aaa;">Welcome to my home!</span><br>
<span style="text-shadow: 2px 2px 2px #0D0D0D, 0px 0px 5px #aaa;">Welcome to my home!</span><br>
<span style="text-shadow: 2px 2px 2px #000, 0px 0px 10px #fff, 0px 0px 20px #fff;">Welcome to my home!</span><br>
<span style="color: white; text-shadow: 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 40px #9dd;">Welcome to my home!</span>
</div>
復制代碼

實例效果圖:

很酷吧!

3.透明度(Transparency or RGBA)

設定元素的透明度一直以來都是比較棘手的問題,不同的瀏覽器之間有不同的使用方法。

比如我以前需要如下進行設置透明度:【注意:此方法不建議用

Firefox, Safari, Chrome和Opera下的CSS透明度

#myElement { 
opacity: .7;
}

IE下的CSS透明度

#myElement { 
filter: alpha(opacity=40);
}

IE8的CSS透明度的方法語法如

復制代碼
#myElement {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
/* 第一行在IE6, IE7和IE8下有效 */
-ms-filter:

"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
/*第二行僅在IE8下有效 */
}
復制代碼

Firefox和Safari舊版本所需的透明度設置:

#myElement { 
-khtml-opacity: .5;
-moz-opacity: 0.5;
}

是不是特別特別的坑爹啊!~~。

還好,我們現在生活在一個開始完美的時代,CSS 3出來之后,有了新的一個名詞就是透明度(transparency)的屬性。

代碼如下:

#box3 {
background-color: rgba(110, 142, 185, .5);
}

里面有4個參數,前3個參數特別好理解,就是rgb顏色的(別告訴我,還不知道什么叫rgb顏色值,不知道的拉出去打屁屁),最最重要的就是第四個值了。它的值在0到1之間,值越大表明越不透明。

不過,也別高興的太早,在這里還是有一個特別的例子,可能大家也想到 就是微軟的IE。微軟老喜歡整個和別人不一樣的東西,累死的是我們程序員。

IE理解上面的語句,直接的理解為背景顏色,而不會理解為 rgba。為了我們在開發的時候確保在所有的瀏覽器中實現完美兼容,我們需要如下進行修正:

復制代碼
#box3 {
/* For all browsers */
background-color: #6e8eb9;
}

body:last-child #box3 {
/* Exclude all IE browsers using :last-child */
background-color: rgba(110, 142, 185, .5)!important;
}
復制代碼

:last-child 是偽選擇器,在CSS2開始在css中使用選擇器。IE 對這個是不認識,所以它不會執行它后面的代碼。

所以,上面就實現了完美兼容。

實例效果圖:

4.列數(Columns)布局

就是說可以把框框內部的內容分成幾個列數。

先上代碼:

復制代碼
 #box1
{
border: 1px solid #699;
/* for Mozilla Firefox */
-moz-column-count: 2;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #6e8eb9;

/* for Safari & Google Chrome */
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #6e8eb9;

margin-left: 100px;
margin-top: 100px;
border-color: Yellow;
background-color:Gray;
}
復制代碼

-moz-column-count:表示列的數目,比如2,那么表示2分成2列。

-moz-column-rule:表示中間分割線的樣式。

實例效果圖:

上面第一個我分層2列,而第二個我是分成3列的。

還有就是第一個的  -webkit-column-rule: 3px solid #6e8eb9;我這樣設置,所以它的分割線就是加粗的。

5.顯示多個背景圖片

你可以在一個標簽元素里應用多個背景圖片。代碼類似與css2.0版本的寫法,但引用圖片之間需用“,”逗號隔開。第一個圖片是定位在元素最上面的背景,后面的背景圖片依次在它下面顯示,如下:

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

代碼如下:

復制代碼
border: 1px solid #699;
background: url(/Nature/bird1-thumb.png) no-repeat 0 0, url(/Nature/apple.jpg) no-repeat 100% 0;
border: 1px solid #699;
padding: 0 20px;
margin-left: 100px;
margin-top: 100px;
border-color: Yellow;
background-color: Gray;
width:400px;
height:300px;
復制代碼

實例效果圖:

但是,這里還是別高興的太早,又是微軟那孩子沒事干,又在這里搞一個不兼容性,所以你 不得下下面代碼,為了兼容所以瀏覽器:

復制代碼
#box5 blockquote {
/* 用在所有的瀏覽器*/
background: url(/i/quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

body:last-child #box5 blockquote{
/* 用在除了IE 之外的瀏覽器:last-child */
background: url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;
}
復制代碼

這樣子才OK.

6.輪廓(outlines)

也就是在框在的內部在畫一個框。

代碼如下:

復制代碼
#box1
{
border: 1px solid #000;
outline
: 1px solid #699;
outline-offset: -20px;
border: 1px solid #699;
padding: 0 20px;
margin-left: 100px;
margin-top: 100px;
border-color: Yellow;
background-color: Gray;
width: 400px;
height: 300px;
}
復制代碼

參數很好理解: outline: 1px solid #699; 這個畫框;

outline-offset 這個表示里面的偏移量,通俗點說 就是距離。

實例效果圖:

 

7.背景漸變(Background Gradients)

顧名思義,漸變就是顏色慢慢的開始變淡。在CSS3中,漸變效果非常非常的靈活,而且運用也很方便。

不過,這里需要注意的一點是在Firfox和chrome瀏覽器之間的設定沒有和上面的那么簡單。

Firfox 的代碼:

background: -moz-linear-gradient(bottom,#b6ebf7, #fff 50%);

Chrome or safari的代碼:

background: -webkit-gradient(linear, left bottom, left top,color-stop(0, #b6ebf7), color-stop(0.80, #fff));

參數解釋下,比如在firfox中,

第一個參數:bottom 表示運用的位置,bottom表示在頂部,當然你也可以有其他地方,比如left表示在方框的左邊,right在方便的右邊,top就是在頂部啦!~。

而在chrome中,color-stop:用來表示開始和結束的值以及里面的顏色。其余參數和上面一樣。

實例效果圖:

8.旋轉(Rotate)

旋轉,顧名思義就是轉動元素的角度,很好理解。

代碼:

復制代碼
 #box1
{
border: 1px solid #000;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
border: 1px solid #699;
padding: 0 20px;
margin-left: 100px;
margin-top: 100px;
border-color: Yellow;
background-color: Gray;
width: 400px;
height: 300px;
}
復制代碼

rotate(角度)里面的數組就是角度的意思,deg是英文單詞degree的縮寫 度數的意思。

實例效果圖:

注意:

如果是負數的話,那么它會向相反方向轉動。

如果是超過360度的話,那么會和360進行求余運算,比如你寫 rotate(380deg),那么它的值等效於rotate(20deg)。

9.反射(reflect)

反射,其實也就是倒影效果。

代碼如下:

復制代碼
#myFont
{
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent),
to(rgba(255, 255, 255, 0.51)));
font-size: 30px;
}
復制代碼

實例效果圖:

10.轉換(Transitions)

注:次內容來自zhangxinxu博客 。謝謝他的努力。

其作用是:平滑的改變CSS的值。無論是點擊事件,焦點事件,還是鼠標hover,只要值改變了,就是平滑的,就是動畫。於是乎,只要一個整站通用的class,就可以很輕松的漸進增強地實現動畫效果,超有實用價值的說。

transition有下面些具體屬性:

transition-property :* //指定過渡的性質,比如transition-property:backgrond 就是指backgound參與這個過渡
transition-duration:*//指定這個過渡的持續時間
transition-delay:* //延遲過渡時間
transition-timing-function:*//指定過渡類型,有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

上面的主要用在transition-timing-function里面的參數。表示速度的快慢。

代碼:

HTML

復制代碼
<div id="transBox" class="trans_box">
<div class="trans_list ease">
ease</div>
<div class="trans_list ease_in">
ease-in</div>
<div class="trans_list ease_out">
ease-out</div>
<div class="trans_list ease_in_out">
ease-in-out</div>
<div class="trans_list linear">
linear</div>
</div>
復制代碼

CSS代碼:

復制代碼
 <style type="text/css">
.trans_box
{
padding: 20px;
background-color: #f0f3f9;
}
.trans_list
{
width: 10%;
height: 64px;
margin: 10px 0;
background-color: #486AAA;
color: #fff;
text-align: center;
}
.ease
{
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
}
.ease_in
{
-webkit-transition: all 4s ease-in;
-moz-transition: all 4s ease-in;
-o-transition: all 4s ease-in;
transition: all 4s ease-in;
}
.ease_out
{
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
transition: all 4s ease-out;
}
.ease_in_out
{
-webkit-transition: all 4s ease-in-out;
-moz-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
}
.linear
{
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
-o-transition: all 4s linear;
transition: all 4s linear;
}
.trans_box:hover .trans_list, .trans_box_hover .trans_list
{
margin-left: 89%;
background-color: #beceeb;
color: #333;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
復制代碼

此主要實現的效果是從左邊移動到右邊!~~。根據參數的不同,進行速度的不同。

實例效果圖:初始化時:

實例效果圖后:

可能有些朋友對這個5個功能不熟悉,所以它們的速度如圖:

最后奉獻2張有用的圖:

CSS 性質

CSS 選擇器

算了,就先到這里吧!。希望對你們有用!~。哈哈~~。

CSS 3中有很多非常酷的東西,需要我們共同去挖掘!~。

 

願你和你的家人一切安好!~。

作者:Lanny☆蘭東才
出處:http://www.cnblogs.com/damonlan
Q Q:*********
E_mail:Damon_lan@163.com or Dongcai.lan@hp.com

本博文歡迎大家瀏覽和轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,在『參考』的文章中,我會表明參考的文章來源,尊重他人版權。若您發現我侵犯了您的版權,請及時與我聯系。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com