用CSS3偽類實現書籤效果

前兩天想給部落格上添個書籤效果，類似於下面這樣:

在網上搜尋一番後，發現一篇純css書籤導航按鈕用三個div實現了這個效果。但是可沒有給我這麼多div，所以試著用偽類實現了一下。

這兩個屬性就像正常元素的小左和小右。他們沒有元素標籤，但是卻有元素的css屬性，除此之外，他們還有乙個特殊的屬性叫'content'，用來放置文字內容。他們雖然叫before和after,但是跟元素卻不是兄弟關係，而是被瀏覽器當成元素的子元素進行布局。有下圖為證。

所以在乙個空的div裡，放乙個有內容的偽類，在偽類沒有脫離文件流的情況下，div一樣會被撐開。

實現書籤效果的另乙個要點是border,對於平時只寫black 1px solid的我來說，直到這回才真正體會到border的魅力。對於乙個高度為0，寬度也為0的空元素，給他border,同樣可以讓元素現形。

border是乙個復合的css屬性。由三個子復合屬性構成：

border-width

border-style
border-color

border-top-color

border-right-color
border-bottom-color
border-left-color

div

看出來了吧，瀏覽器是用初中幾何畫出來的!!首先畫乙個長80(border左寬度+border右寬度)，寬60的矩形(border上寬度+border下寬度)，然後上右下左分別向里偏移20，30，40，50,得到border的交點，學霸告訴我，其實偏移兩條邊就行。最後連線交點和矩形的四個頂點，然後畫不同顏色的三角形就好了。

掌握上面的基礎知識後，再懂點定位的知識，畫個書籤就比較簡單了:

書籤

.button-content:before  

.button-content 
.button-content:after

這裡檢視效果

2018-2-24更新

用CSS3實現鐘錶效果

var olist document.getelementbyid list 獲取到刻度 var ocss document.getelementbyid css var ohour document.getelementbyid hour 獲取時針 var omin document.getele...

用CSS3實現放大效果

任務描述 本關任務 用css3放大效果。效果如下 相關知識 為了完成本關任務，你需要掌握 1.transform屬性，2.transition屬性。transform屬性 下面是基本的html結構，效果如下 現在需要基於中心放大1.2倍。效果如下 該如何實現呢？咱們先實現放大1.2倍，用到了 tra...

用css3實現風車效果

前面講過css3可以替代很多js實現的效果，其實很多時候純css3甚至可以替代，直接用css3就可以畫出一些簡單的。雖然css3畫出來的效果可能不如直接用的好，實現起來也比較複雜，最麻煩的是相容性問題，不如來得直接實用。但是換一種思路去思考問題的解決辦法往往能激發我們的靈感，也有助於我們學習css3...