利用 CSS3 構建一個氣泡對話方塊

標籤：

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

使用漸進增強開發方式，因此一開始的介面只要擁有基本樣式即可。基本的評論區介面樣式如下：

現在我們來逐步完善這個部落格的評論地區。

 

word-wrap

當使用者在評論區留下一長串的 URL 時，有可能會出現以下情況。

此時需要使用 word-wrap，使用 word-wrap 的原因是基於 Webkit 核心的瀏覽器以及 IE 在遇到”/“時並不會自動換行，且所有主流瀏覽器遇到“_”也不會自動換行，因此需要使用 word-wrpa 屬性賦值為 break-word。這個屬性允許文本在詞內斷開。

1 2	word-wrap: break-word;

border-radius

通過設定 border-radius 實現圓角效果。使用 CSS3 屬性即可，減少對圖片的依賴，加快使用者訪問速度。設定時需要注意瀏覽器的支援：

1 2 3 4

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

利用邊框建立圖形效果

平常在使用邊框的時候，我們往往只是對邊框的寬度，顏色以及邊框樣式進行設定，但是邊框還有一種使用方法。仔細觀察下面圖片：

可以看到個方向的邊框在交界處會呈現一個特殊的交界線，因此實現以下代碼會出現如下效果：

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

在此基礎上通過調整各邊框的顏色以及寬度即可產生一個小三角形表徵圖。

::before 和 ::after

某些情況下我們希望通過 CSS 產生一些不重要但能美化介面的內容，此時就可以使用虛擬元素 ::before 和 ::after 指定內容的插入位置。比如我們希望給頁面上的每個圖片標題都增加“（圖）”這個首碼，此時你可以使用以下的 CSS：

1 2 3 4

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

結合上面提到的邊框建立圖形效果，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; }

目前我們的部落格評論區介面如下：

利用 RGBA 或者 HSLA 實現半透明背景

在 CSS3 中，我們可以使用下面兩種方法設定顏色。

RGBA，即“紅色、綠色、藍色和 Alpha 透明度”

前三個參數的取值為 0 ~ 255 或者 0% ~ 100%

最後一個參數取值為 0 ~ 1

HSLA，即“色調、飽和度、亮度和 Alpha 透明度”

第一個參數的取值為 0 ~ 360

第二和第三個參數的取值為 0% ~ 100%

最後一個參數取值為 0 ~ 1

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

使用背景透明的效果：

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

使用 opacity 透明的效果：

box-shadow

無需使用圖片，秩序通過設定介面的陰影製作效果，可以增強介面的立體感。增加以下 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 參數含義：

第一個值表示相對於盒容器的水平位移

第二個值表示垂直位移

第三個值表示模糊半徑，指定有多少像素的陰影被展開

第四個值是陰影的顏色

配合偽類 :hover 增強立體感

增加下面的 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); }

當滑鼠在文字框上方懸停時，通過改變陰影位移營造一種動態感覺，增強立體感。

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

transform

transform 屬性是 3D 變形模組的一部分，常見的 transform 屬性有以下幾個：

translate，移動位置

scale，縮放元素

rotate，旋轉元素

skew，傾斜元素

我們來給帳戶圖片進行旋轉：

1 2 3 4 5 6

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

原文來自：技術學習小組

利用 CSS3 構建一個氣泡對話方塊