css3實現的圓角效果程式碼例項

admin發表於2017-02-19
CSSS3
本章節分享一段程式碼例項，它使用css3實現了圓角效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
p.speech{   
  width:200px;   
  height:100px;   
  text-align:center;   
  line-height:100px;   
  background-color:#fff;   
  border:8px solid #666;   
  -webkit-border-radius:30px;   
  -moz-border-radius:30px;   
  border-radius:30px;   
  -webkit-box-shadow:2px 2px 4px #888;   
  -moz-box-shadow:2px 2px 4px #888;   
  box-shadow:2px 2px 4px #888;   
}  
</style>
</head>
<body>
<p class="speech"></p>  
</body>
</html>

上面的程式碼實現了我們的要求，程式碼比較簡單，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.border-radius可以參閱CSS3實現圓角效果一章節。

（2）.box-shadow可以參閱CSS3 box-shadow一章節。

相關文章