DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS3實例教程:使用border
CSS3實例教程:使用border
編輯:CSS詳解     
文章簡介:熟練使用border-radius.

這個實例的目的:熟練使用border-radius

涉及的屬性:border-radius 、linear-gradIEnt 、 box-shadow 提示:“:before” “:after”,IE對after、before是不支持的,請在Firefox、Opera、Chrome下試調!要求浏覽器:Firefox、Opera、Chrome 效果圖:

先看下大致的步驟: 1.定義class,繪制一個矩形; 2.用border-radius屬性進行對其圓角處理; 3.使用pseudo元素創建蜷縮角; 4.創建條文漸變的效果。 詳細步驟 第一步:定義class,繪制一個矩形:

<a class="docIcon" href="#">Document Icon</a>

這裡要注意下:“display“默認屬性值是“inline”,所以我們要使用“block”這個屬性值以保證其正確顯示:

  1. .docIcon {
  2. background: #eee;
  3. background: -webkit-linear-gradIEnt(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
  4. background: -moz-linear-gradIEnt(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
  5. background: -o-linear-gradIEnt(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
  6. background: -ms-linear-gradIEnt(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
  7. background: linear-gradIEnt(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
  8. border: 1px solid #ccc;
  9. display: block;
  10. width: 40px;
  11. height: 56px;
  12. position: relative;
  13. margin: 42px auto;
  14. }

這裡的linear-gradIEnt是漸變效果設置。下面加上陰影效果,使用“box-shadow ”屬性來實現:

  1. .docIcon
  2. {
  3. ...
  4. -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
  5. -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
  6. box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
  7. text-indent:-9999em;
  8. }

這裡的box-shadow是陰影效果設置。到目前為止,我們完成了下面的效果,如圖:



第二部:用border-radius屬性進行對其圓角處理: Border-radius的定義、用法請點擊此處了解。代碼:
  1. .docIcon
  2. {
  3. ...
  4. -webkit-border-radius:3px 15px 3px 3px;
  5. -moz-border-radius:3px 15px 3px 3px;
  6. border-radius:3px 15px 3px 3px;
  7. }

如圖:

Ps:這裡要著重提示下:before是一個偽類選擇器,僅支持Firefox、Opera、Chrome。大家可能對下面倆步不太了解,這個沒關系,我會針對它們另外寫一篇詳細的文章。在這個實例當中,大家只要知道我們用到過":before"":after"這個倆個偽類選擇器即可。 第三部:蜷縮角

首先,添加“:before”,我們需要創建一個15px的矩形並應用背景漸變:
  1. .docIcon:before {
  2. content: "";
  3. display: block;
  4. position: absolute;
  5. top: 0;
  6. right: 0;
  7. width: 15px;
  8. height: 15px;
  9. background: #ccc;
  10. background: -webkit-linear-gradIEnt(45deg, #fff 0, #eee 50%, #ccc 100%);
  11. background: -moz-linear-gradIEnt(45deg, #fff 0, #eee 50%, #ccc 100%);
  12. background: -o-linear-gradIEnt(45deg, #fff 0, #eee 50%, #ccc 100%);
  13. background: -ms-linear-gradIEnt(45deg, #fff 0, #eee 50%, #ccc 100%);
  14. background: linear-gradIEnt(45deg, #fff 0, #eee 50%, #ccc 100%);
  15. -webkit-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
  16. -moz-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
  17. box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
  18. border-bottom: 1px solid #ccc;
  19. border-left: 1px solid #ccc;
  20. }

接下來我們要實現右上角圓角的效果,我們使用相同的方法進行對齊:

...

-webkit-border-radius:3px 15px 3px 3px;

-moz-border-radius:3px 15px 3px 3px;

border-radius:3px 15px 3px 3px;

下面是我們目前實現的效果:


第四步:添加條文漸變效果:

下面我們使用“:after”來實現效果,我們出示高度定位0,0。我們應用整體寬度的60%,再加上

margin-left和margin-right各20%(也就是100%):

  1. .docIcon:after
  2. {
  3. content:"";
  4. display:block;
  5. position:absolute;
  6. left:0;
  7. top:0;
  8. width:60%;
  9. margin:22px 20% 0;
  10. height:15px;
  11. }


用CSS3實現多條線漸變:

  1. .docIcon:after
  2. {
  3. ...
  4. background:#ccc;
  5. background: -webkit-linear-gradIEnt(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
  6. background: -moz-linear-gradIEnt(top, #cc 0, #cc 20%, #ff 20%, #ff 40%, #cc 40%, #cc 60%, #ff 60%, #ff 80%, #cc 80%, #cc 100%);
  7. background: -o-linear-gradIEnt(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
  8. background: -ms-linear-gradIEnt(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
  9. background:linear-gradIEnt(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
  10. }



最後結果:

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved