浮出層是web頁面中經常用到的功能，帶有小小尖角的浮出層則更為生動，所以今天帶給大家的是有角的浮出層，一起看看吧！
html:
複製**
**如下:
◆◆ ◆◆vslyehh
◆◆ ◆◆
hi，看到了嗎？
這是常用浮出層的寫法！
以上html構成了乙個浮出層和四個方向的尖角，其實你只需要其中的乙個span標籤，所以真正用上的**並沒那麼多。
css:
複製**
**如下:
/* poptip */
.poptip
.poptip-arrow
.poptip-arrow em,.poptip-arrow i
.poptip-arrowww.cppcns.comw em
.poptip-arrow i
.poptip-arrow-top,.poptip-arrow-bottom
.poptip-arrow-left,.poptip-arrow-right
.poptip-arrow-top
.poptip-arrow-top em
.poptip-arrow-top i
.poptip-arrow-bottom
.poptip-arrow-bottom em
.poptip-arrow-bottom i
.poptip-arrow-left
.poptip-arrow-left em
.poptip-arrow-left i
.poptip-arrow-right
.poptip-arrow-right em
.poptip-arrow-right i
這段css寫的已經很簡練了，所以不要嫌多，因為它具有很強的擴充套件性。
如果你希望尖角居中顯示，可以在 .poptip-arrow 這個 span 上加上 style="left:50%&q程式設計客棧uot; 或者 style="top:50%"
這個**相容ie6-10、chrome、firefox等基本上所有主流瀏覽器，所以不必擔心其相容性和實用性。據悉，支付寶等站點採用的也是此方式。
當然，不排除還有更好的實現方式，如你知道，請留言告訴大家，謝謝！
本文標題: css常用浮出層的寫法及例項
本文位址:
CSS常用提示浮出層的寫法
css常用浮出層的寫法 div class poptip span class poptip arrow poptip arrow top em em i i span span class poptip arrow poptip arrow right em em i i span span cl...
CSS3常用功能的寫法
隨著瀏覽器的公升級，css3已經可以投入實際應用了。但是，不同的瀏覽器有不同的css3實現，相容性是乙個大問題。上週的ydn介紹了css3 please 該 總結了一些常用功能的寫法。以下就是這些寫法的詳細介紹。所有 都經過了firefox 3.6和ie 8.0的驗證，原文的錯誤之處也已得到改正。一...
CSS3常用功能的寫法
一 圓角 rounded corner 圓角的實現比較簡單，只要設好乙個半徑值就可以了。但是目前所有的ie都不支援css圓角，要等到ie 9才行。box round moz box shadow webkit box shadow和box shadow的設定是一樣的，都有4個引數，含義分別為 x軸偏...