這是一篇CSS3教程 http://www.maiziedu.com/course/228/，主要講述在不使用圖片的情況下如何使用 CSS3 創(chuàng)建圖像效果。

使用漸進(jìn)增強(qiáng)的開發(fā)方式，因此一開始的界面只要擁有基本樣式即可?；镜脑u(píng)論區(qū)界面樣式如下：

現(xiàn)在我們來逐步完善這個(gè)博客的評(píng)論區(qū)域。

 

word-wrap

當(dāng)用戶在評(píng)論區(qū)留下一長(zhǎng)串的 URL 時(shí)，有可能會(huì)出現(xiàn)以下情況。

此時(shí)需要使用 word-wrap，使用 word-wrap 的原因是基于 Webkit 內(nèi)核的瀏覽器以及 IE 在遇到”/“時(shí)并不會(huì)自動(dòng)換行，且所有主流瀏覽器遇到“_”也不會(huì)自動(dòng)換行，因此需要使用 word-wrpa 屬性賦值為 break-word。這個(gè)屬性允許文本在詞內(nèi)斷開。

1 2	word-wrap: break-word;

border-radius

通過設(shè)置 border-radius 實(shí)現(xiàn)圓角效果。使用 CSS3 屬性即可，減少對(duì)圖片的依賴，加快用戶訪問速度。設(shè)置時(shí)需要注意瀏覽器的支持：

1 2 3 4

-moz-border-radius: 20px;   -webkit-border-radius: 20px;   border-radius: 20px;

利用邊框創(chuàng)建圖形效果

平常在使用邊框的時(shí)候，我們往往只是對(duì)邊框的寬度，顏色以及邊框樣式進(jìn)行設(shè)置，但是邊框還有一種使用方法。仔細(xì)觀察下面圖片：

可以看到個(gè)方向的邊框在交界處會(huì)呈現(xiàn)一個(gè)特殊的交界線，因此實(shí)現(xiàn)以下代碼會(huì)出現(xiàn)如下效果：

div {     border-color: red green blue orange;     border-style: solid;     border-width: 20px;     width: 0;     height: 0; }

在此基礎(chǔ)上通過調(diào)整各邊框的顏色以及寬度即可生成一個(gè)小三角形圖標(biāo)。

::before 和 ::after

某些情況下我們希望通過 CSS 生成一些不重要但能美化界面的內(nèi)容，此時(shí)就可以使用偽元素 ::before 和 ::after 指定內(nèi)容的插入位置。比如我們希望給頁面上的每個(gè)圖片標(biāo)題都增加“（圖）”這個(gè)前綴，此時(shí)你可以使用以下的 CSS：

1 2 3 4

.caption::before { content:“（圖）” }

結(jié)合上面提到的邊框創(chuàng)建圖形效果，CSS 代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13

blockquote::after {   content: "\00a0";   display: block;   position: absolute;   top: 20px;   left: -20px;   width: 0;   height: 0;   border-width: 10px 20px 10px 0;   border-style: solid;   border-color: transparent #A6DADC transparent transparent; }

目前我們的博客評(píng)論區(qū)界面如下：

利用 RGBA 或者 HSLA 實(shí)現(xiàn)半透明背景

在 CSS3 中，我們可以使用下面兩種方法設(shè)置顏色。

RGBA，即“紅色、綠色、藍(lán)色和 Alpha 透明度”

前三個(gè)參數(shù)的取值為 0 ~ 255 或者 0% ~ 100%

最后一個(gè)參數(shù)取值為 0 ~ 1

HSLA，即“色調(diào)、飽和度、亮度和 Alpha 透明度”

第一個(gè)參數(shù)的取值為 0 ~ 360

第二和第三個(gè)參數(shù)的取值為 0% ~ 100%

最后一個(gè)參數(shù)取值為 0 ~ 1

以上兩種方法都可以設(shè)置背景的透明度，但是需要注意的是，opacity 屬性的作用是使得整個(gè)元素的透明度發(fā)生變化，而不僅僅是背景。

使用背景透明的效果：

1 2	background-color: hsla(182,44%,76%,.5);

使用 opacity 透明的效果：

box-shadow

無需使用圖片，秩序通過設(shè)置界面的陰影效果，可以增強(qiáng)界面的立體感。增加以下 CSS 代碼：

1 2 3 4

-moz-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3); -webkit-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3); box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);

box-shadow 參數(shù)含義：

第一個(gè)值表示相對(duì)于盒容器的水平偏移

第二個(gè)值表示垂直偏移

第三個(gè)值表示模糊半徑，指定有多少像素的陰影被拉伸

第四個(gè)值是陰影的顏色

配合偽類 :hover 增強(qiáng)立體感

增加下面的 CSS 代碼：

1 2 3 4 5 6 7 8

blockquote:hover {   top: -2px;   left: -2px;   -moz-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);   -webkit-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);   box-shadow: 3px 3px 2px hsla(0,0%,0%,.3); }

當(dāng)鼠標(biāo)在文本框上方懸停時(shí)，通過改變陰影偏移量營造一種動(dòng)態(tài)的感覺，增強(qiáng)立體感。

同樣的，也可以通過 text-shadow 給文字添加陰影效果。但這些陰影效果不應(yīng)該濫用，否則只會(huì)起到反面效果。

transform

transform 屬性是 3D 變形模塊的一部分，常見的 transform 屬性有以下幾個(gè)：

translate，移動(dòng)位置

scale，縮放元素

rotate，旋轉(zhuǎn)元素

skew，傾斜元素

我們來給用戶頭像進(jìn)行旋轉(zhuǎn)：

1 2 3 4 5 6

.comment-meta img {   -moz-transform: rotate(-5deg);   -webkit-transform: rotate(-5deg);   transform: rotate(-5deg); }

原文來自：技術(shù)學(xué)習(xí)小組