手機QQ的聊天框很漂亮,包括好多短信交互框也做成類似的風格,各種效果,各種炫,至於不規則形狀的那種(稱為手繪風格),比較麻煩,這里使用CSS3新特性,border-radius,進行信息框交互內容的設計.
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設計的漂亮面板 </title>
<style> .column { height: 150px; width: 150px; float: left; background-color: #fe6;
/*CSS3，設置圓角邊框*/ border-radius: 10px;
/*CSS3，設置陰影效果*/ 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，設置文字陰影*/ text-shadow: #000 0 1px; box-shadow: 5px;
/*針對webkit瀏覽器內核擴展，設置背景的漸變色*/ 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，設置圓角邊框*/ 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>
效果很漂亮吧,實例中我們使用的是圓角邊框,可以利用瀏覽器會平分邊框邊緣的特性制作小三角,然后再結合圓角邊框,可以做成如下效果:
將層的邊框設置為10個像素,並為不同的邊框指定不同的顏色,然后不斷縮小層的寬度和高度.當寬度和高度均為0時,每個方向的邊框都會被分成三角形,將三個方向的邊框顏色指定為背景色,就可以得到一個三角形.
下面模擬一個QQ聊天框的樣式
效果圖如下:
源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<meta name="Author" content="dennisit">
<meta name="Description" content="dennisit@163.com,蘇若年">
<title>CSS設計圓角邊框 </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>
轉載請注明出處:[http://www.cnblogs.com/dennisit/archive/2013/03/21/2973838.html]
