山寨一把QQ移动终端聊天框,网页版效果其实也很好的!
手機QQ的聊天框很漂亮,包括好多短信交互框也做成類似的風(fēng)格,各種效果,各種炫,至于不規(guī)則形狀的那種(稱為手繪風(fēng)格),比較麻煩,這里使用CSS3新特性,border-radius,進行信息框交互內(nèi)容的設(shè)計.
border-radius樣式用于制作圓角邊框,通過像素,百分比等單位制定圓角的形狀.如果希望單獨指定某一個邊框的形狀,可以使用border-top-left-radius,?border-top-rigth-radius,border-bottom-left-radius,border-bottom-right-radius屬性,分別指定左上、右上、左下、右下4個邊角,border-radius可用于圖像,表格,層等大部分元素,圓角之外的部分會以透明色填充.
?
我們先展示一個圓角邊框的實例.
效果圖如下:
源碼如下
<!DOCTYPE html> <html><head><meta charset="GBK"><meta name="Author" content="dennisit"><meta name="Description" content="dennisit@163.com,蘇若年"><title>HTML5+CSS3設(shè)計的漂亮面板 </title><style>.column {height: 150px; width: 150px; float: left; background-color: #fe6;/*CSS3，設(shè)置圓角邊框*/border-radius: 10px;/*CSS3，設(shè)置陰影效果*/box-shadow: 0 5px 10px rgba(0,0,0,0.5);text-align: center; cursor: move; margin-right: 5px;}.column header {color: #fff; padding: 5px;/*CSS3，設(shè)置文字陰影*/text-shadow: #000 0 1px; box-shadow: 5px;/*針對webkit瀏覽器內(nèi)核擴展，設(shè)置背景的漸變色*/background: -webkit-gradient(linear, left top, right top, color-stop(0, #fb0), color-stop(0.5, #f80), color-stop(1, #fb0));border-bottom: 1px solid #dd0;/*CSS3，設(shè)置圓角邊框*/ border-top-left-radius: 10px;border-top-right-radius: 10px;} </style></head><body><div id="columns"><div class="column"><header>公 告 欄</header></div><div class="column"><header>信息展示</header></div></div></body> </html>效果很漂亮吧,實例中我們使用的是圓角邊框,可以利用瀏覽器會平分邊框邊緣的特性制作小三角,然后再結(jié)合圓角邊框,可以做成如下效果:
將層的邊框設(shè)置為10個像素,并為不同的邊框指定不同的顏色,然后不斷縮小層的寬度和高度.當(dāng)寬度和高度均為0時,每個方向的邊框都會被分成三角形,將三個方向的邊框顏色指定為背景色,就可以得到一個三角形.
下面模擬一個QQ聊天框的樣式
效果圖如下:
源碼
<!DOCTYPE html> <html><head><meta charset="GBK"><meta name="Author" content="dennisit"><meta name="Description" content="dennisit@163.com,蘇若年"><title>CSS設(shè)計圓角邊框 </title><style>#container{width:480px;}body{font-size:12px;}p{font-size:13px;font-weight:600;}.arrow{border:solid 10px #3E3E3E;width:0px;height:0px;border-left-color:white;border-right-color:white;}.panel{border:solid 4px #3E3E3E;border-radius:15px;padding:30px;}.left{margin-left:60px;margin-top:-20px;width:250px;}.left .arrow{border-top:none;margin-left:20px;}.left .panel{background-color:#eef;border-bottom-right-radius:0px;}.right{margin-left:160px;margin-top:20px;margin-bottom:-20px;width:250px;}.right .arrow{border-bottom:none;margin-left:210px;}.right .panel{background-color:#eef;border-bottom-left-radius:0px;}</style></head><body><div id="container"><p align="left">冰河咒印:</p><div class="left"><div class="arrow"></div><div class="panel">蘇若年 在啊?</div></div><div class="right"><div class="panel">嗯！什么事呀？</div><div class="arrow"></div></div><p align="right">:蘇若年</p><p align="left">冰河咒印:</p><div class="left"><div class="arrow"></div><div class="panel">我的新郵箱<a href="mailto:dennisit@163.com">dennisit@163.com!</a></div></div></div></body> </html>轉(zhuǎn)載請注明出處:[http://www.cnblogs.com/dennisit/archive/2013/03/21/2973838.html]
?
轉(zhuǎn)載于:https://www.cnblogs.com/dennisit/archive/2013/03/21/2973838.html
總結(jié)
以上是生活随笔為你收集整理的山寨一把QQ移动终端聊天框,网页版效果其实也很好的!的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python怎么暂停爬虫_python
- 下一篇： cesium three性能比较_Go学