用CSS偽元素製作箭頭

現在讓我們開始製作箭頭吧！

在開始前，你要知道如何用css去畫乙個三角形，如果還不清楚可以看看這裡純css畫各種圖形

我們用到兩個css偽元素，before和after，它們屬於行內元素，但可以用display來改變，before和after是在css2的新特性（現在已經老了），瀏覽器對其相容性還未了解。

實現**如下：

1

2<
style
>
3.divtest
12.divtest:before
25.divtest:after
38style
>
39<
body
>
40<
div 
class
="divtest"
>
41這是乙個箭頭
42div
>

效果圖：

這是乙個箭頭

這裡用css偽元素實現了前後兩個小三角形，乙個白色乙個紅色，分別新增到div塊元素的前後，就變成了箭頭。當然稍作修改也可以實現下面的箭頭

這是乙個箭頭

除了這些，你還可以為這些箭頭新增樣式，如漸變、投影、邊距、旋轉等

下面是邊框的**，觀察一下邊緣處的分配原則：

1

<
style
>
2.divtest1
10style
>
11<
div 
class
="divtest1"
>
div>

效果圖：

這個例子，我們可以更好的理解邊框了。

用css偽元素實現tooltip效果

滑鼠懸浮在我身上試試 如果你想將該tooltip用於顯示輸入框驗證後錯誤資訊也是可以的，只需要將該輸入框input用span包裹，並且將所有樣式都給該span即可。tooltip tooltip before tooltip after 保底收益 超出保底佣金率 function isoublenu...

css偽類，偽元素

偽類作用於整個元素，比如 a link a hover div first child 儘管這些條件都不是基於dom的，但結果沒乙個都是作用於乙個完整的元素，比如整個鏈結，段落，div等等 偽元素作用於元素一部分，比如 p first line p first letter 偽元素作用於元素的一部分...

CSS偽類 偽元素

css偽類用於向某些選擇器新增特殊的效果。錨偽類a link 未訪問的鏈結 a visited 已訪問的鏈結 a hover 滑鼠移動到鏈結上 a active 選定的鏈結 注意 1 在 css 定義中，a hover 必須被置於 a link 和 a visited 之後，才是有效的。2 在 cs...