CSS3 試試看

作者: Nic Pei  來源: 博客園  發布時間: 2010-12-21 16:20  閱讀: 1160 次  推薦: 0   原文鏈接   [收藏]  
摘要:今天我們來嘗試一下CSS3的多種新功能,首先你需要安裝IE9這樣的新平臺。希望對大家有所幫助。

  無意中看到CSS3的強大功能,比較感興趣,分享下先。。。呵呵

  首先你得安裝IE9,,,,

  如果你沒安裝IE9 beata,來這里試試。。。

  http://windows.microsoft.com/en-US/internet-explorer/download/ie-9/worldwide

  選擇語言和版本,

image

  或者是FireFox3.1版本以上,Opera9.5版本以上。(我只是在IE9下面測試)。

  1. border-radius屬性:

  很好看的形狀不再需要image來實現啦。。我們看看如何讓一個DIV顯示為不規則。并在里面存放一些文本。使用CSS3中的border-radius屬性:

 
1. div
2.
{
3. border: solid black;
4. border-radius: 40px;
5. height: 1in;
6. width: 2in;
7. overflow: hidden;
8. }

  div顯示:

image

  2.background-clip屬性:

  background=clip結合border-radius使用,可以設計出不錯的形狀。

Css:

image

  兩個div的顯示:

image

  3. border-x-x-radius屬性

  x代表top,right,left,bottom,想讓哪邊有圓角就可以把x設置為哪邊,例如top-right就是右上角,top-left就是左上角,。。。。。,另外后面還可以添加百分比來設置圓角的顯示弧度。

  CSS:

image

  效果:

image

  4.background-clip+父子結構的div使用

  CSS+Html:

image

  效果:

image

  5.圓角文本輸入框

  Css+Html:

image

  效果:

image

  6、CSS3使用border屬性畫圓畫方:

image

  Css+Html:

image

  確實很強大,以后很多的圖片都可以用CSS來取代了。。。。。。而且不需要為了一個圓角寫那么多CSS和js了。

0
0
 
標簽:CSS3 Web
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()