CSS3利用乙個div實現內圓角邊框效果

*首先要清楚的是，box-shadow的形狀會隨著border-radius變化。下面的例子可以證明：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>document
title
>
<
style 
type
="text/css"
>
div.div3
style
>
head
>
<
body
>
<
div 
class
="div3"
>
div>
body
>
html
>

*而實現內圓角邊框（外邊框為直角）就可利用以上特性（box-shaodw填充outline和border之間的空白），**如下：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>document
title
>
<
style 
type
="text/css"
>
div.div1
.div2
style
>
head
>
<
body
>
<
div 
class
="div1"
>
div>
<
div 
class
="div2"
>
div>
body
>
html
>

div2效果：

利用css3實現箭頭

在一些開發中，經常會用到一些箭頭，如圖所示 要實現圖上的搶這個箭頭，傳統的做法就是切一張這樣的，然後最為背景圖就行了。但考慮到節約載入資源以及css3的強大特性，我們完全可以用css3來實現如圖需求。class info r class btn 搶span div info r 這樣就可以了。利用這...

利用CSS3特性巧妙實現漂亮的DIV箭頭

還有傲遊 的導航條 像傲遊賬戶上方這種箭頭更需要多幅以表現箭頭和hover的效果。實現的原理是 我們可以將箭頭看作是乙個矩形或者菱形的乙個角，使用css3的屬性transform來實現矩形的旋轉。朝上的箭頭需要將矩形旋轉45度，我們使用transform rotate 45deg 來實現，另外針對不...

利用CSS3特性巧妙實現漂亮的DIV箭頭

還有傲遊 的導航條 像傲遊賬戶上方這種箭頭更需要多幅以表現箭頭和hover的效果。實現的原理是 我們可以將箭頭看作是乙個矩形或者菱形的乙個角，使用css3的屬性transform來實現矩形的旋轉。朝上的箭頭需要將矩形旋轉45度，我們使用transform rotate 45deg 來實現，另外針對不...