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

admin發表於2017-02-17
CSSS3
使用CSS3實現div的圓角效果可謂是輕鬆加愉快。

雖說有一定的相容性問題，但是這絕對是未來的趨勢，並且當前裝機預裝系統都是window8了，還用擔心相容嗎以後。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#antzone{ 
  font-family:Arial; 
  border:2px solid #379082; 
  border-radius:20px; 
  padding:30px 30px; 
  width:330px; 
}
</style> 
</head> 
<body> 
<div id="antzone">softwhy.com</div> 
</body> 
</html>

上面的程式碼實現了我們的要求，程式碼比較簡單這裡就不多介紹了。

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

相關文章