css3學習之 偽類與圓角

隨著css3.0的發布到逐漸完善，目前已經大部分瀏覽器已經能較好地適配，所以寫一些css3的學習經歷，分享心得，主要以案例講解為主，話不多說，今天以css3的新增的「圓角」屬性來講解，基於web畫乙個「安卓機械人」。

一.理解border-radius屬性

border-radius-top-left         /*左上角*/

border-radius-top-right /*右上角*/
border-radius-bottom-right /*右下角*/
border-radius-bottom-left /*左下角*/

<

style
>
.container
.res
.half-circle
.circle
style
>

<

body
>
<
div 
class
="container"
>
<
div 
class
="res"
>
div>
<
div 
class
="half-circle"
>
div>
<
div 
class
="circle"
>
div>
div>
body
>

我想，通過**都能大概了解border-radius的基礎用法了吧。

那麼接下來就來學習一下偽元素::before，::after。

css3為了區分偽類和偽元素，偽元素採用雙冒號寫法。

常見偽類——:hover,:link,:active,:target,:not(),:focus。

常見偽元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部新增內容。

這些新增不會出現在dom中，不會改變文件內容，不可複製，僅僅是在css渲染層加入。

所以不要用:before或:after展示有實際意義的內容，盡量使用它們顯示修飾性內容，例如圖示。

舉例：在某類選擇器前後新增樣式，就可以使用:before偽元素，如下：

<

style
>
.en_header::before,
.en_header::after
style
>

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
/>
<
title
>android機械人
title
>
<
style
>
.container
.en_header
.en_header::before,
.en_header::after
.en_header::before
.en_header::after
.en_body
.en_body::before,
.en_body::after
.en_body::before
.en_body::after
.en_footer
.en_footer::before,
.en_footer::after
/*.en_footer::before
*/.en_footer::after
style
>
head
>
<
body
>
<
div 
class
="container"
>
<
div 
class
="en_header"
>
div>
<
div 
class
="en_body"
>
div>
<
div 
class
="en_footer"
>
div>
div>
body
>
html
>

css 3鏈結偽類與動態偽類

鏈結偽類link 表示作為超連結，並指向乙個未訪問的位址的所有錨 鏈結偽類不可以加在div上 點我點我點我 我是div啦 view code 點我點我點我 view code 可以利用target寫乙個div切換 div1 div2 div3 div1 div2 div3 view code 動態偽...

css 3鏈結偽類與動態偽類

鏈結偽類link 表示作為超連結，並指向乙個未訪問的位址的所有錨 鏈結偽類不可以加在div上 點我點我點我 test 我是div啦 view code 點我點我點我 view code 可以利用target寫乙個div切換 div1 div1 div2 div2 div3 div3 div1 div...

CSS3之圓角製作

如今css3中的border radius出現後，讓我們沒有那麼多的煩惱了，首先製作圓角的時間是省了，而且其還有多個優點 其一減少 的維護的工作量，少了對的更新製作，的替換等等 其 二 提高 的效能，少了對進行http的請求，網頁的載入速度將變快 其三增加視覺美觀性。既然border radius有...