因為css3尚未形成標準，所以現行的瀏覽器對於css3支援不太一致，某些特性需要加上瀏覽器字首
css屬性的瀏覽器字首 字首
渲染引擎
使用該引擎的瀏覽器
-khtml-
khtml
konqueror
-ms-
trident
internet explorer
-moz-
mozilla
firefox
-o-*
presto
opera opera mobile
-webkit-
webkit
safari chrome android瀏覽器
沒有新增css3樣式之前原始頁面如下：
1.第一步，實現圓角效果，在css之前實現圓角效果比較麻煩，但是css3中通過border-radius可以很容易實現圓角效果
.radius可以通過設定border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius分別設定邊框四個角的弧度。
2.第二步，新增氣泡的尾巴。
可以通過css來實現乙個三角形充當氣泡的尾巴，將容器的寬度以及高度設定為0，然後給盒容器設定乙個較粗的邊框，瀏覽器會在邊框的交界處繪製結合線
.********通過將另外三條邊設定為透明的，即可得到乙個三角形
.********.left:before
.right:before
3.第三步，我們繼續對輸入框進行美化，通過hsla或者rgba實現半透明背景
目前輸入框是通過十六進製制來設定顏色
background-color:#a6dadc
還可以通過
background-color:rgb(166, 218,220)
background-color:rgba(166, 218,220,1)
background-color:hsl(182, 44%,76%)
background-color:rgba(182, 44%,76%,1)
在rgba模式中，前三個數字表示紅，綠，藍的值，取值範圍為0~255，最後乙個表示透明度
在hsla模式中，前三個數字分別表示色調（取值範圍為0~360），飽和度（0%~100%），和亮度（0%~100%），最後乙個引數表示透明度。
設定透明背景後效果圖如下：可以看到背景花紋
接下來我們給聊天對話方塊設定乙個背景漸變的效果，使背景框更加立體：
可以將linear-gradient,radial-gradient賦值給任何接受的屬性
background-image:-moz-linear-gradient(hsla(0,0%,100%, 0.6), hsla(0, 0%, 100%, 0) 30px);
background-image:-webkie-gradient(linear, 0 0, 0 30, from(hsla(0, 0%, 100%, 0.6)), to(hsla(0, 0%, 100%, 0)));
效果圖：
接下來我們給對話方塊新增陰影，使其有立體的效果：
box-shadow屬性可以給盒容器新增陰影效果，我們需要設定陰影相對盒容器水平以及垂直方向上的偏移，陰影的顏色以及模糊半徑和擴充套件半徑
-moz-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
-webkit-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
繼續給其新增特效，當滑鼠移動到對話方塊的時候，改變對話方塊的位置以及陰影的大小，彷彿氣泡彈出來一樣
CSS3效果 實現氣泡效果
首先定義乙個 p class speech p 先給外層的容器新增樣式 p.speech 沒有什麼特別複雜的，主要的核心就在postion relative，用來定位對話浮層的。我們還需要一些mozilla和webkit的屬性來完成圓角和陰影，ie8以下的瀏覽器看不到這些屬性，只是顯示乙個框，不影響...
CSS3效果 實現氣泡效果
首先定義乙個 p class speech p 先給外層的容器新增樣式 p.speech 沒有什麼特別複雜的，主要的核心就在postion relative，用來定位對話浮層的。我們還需要一些mozilla和webkit的屬性來完成圓角和陰影，ie8以下的瀏覽器看不到這些屬性，只是顯示乙個框，不影響...
CSS3 巧妙實現聊天氣泡
前一陣子敢玩的 mobile 頁改版完成了，就之前的頁面風格更加扁平化，從暗色系為主背景轉到亮色背景，去掉更多的陰影，給使用者簡約的體驗風格，哈哈我不是設計師不過多評價啦。感興趣的朋友可以直接去 idarex移動端主頁。這次改版的所有 style 都是 orange 寫的，感觸頗多，分期分享給大家 ...