CSS3实现的div圆角效果代码实例

CSS3实现的div圆角效果代码实例:
使用CSS3实现div的圆角效果可谓是轻松加愉快。
虽说有一定的兼容性问题,但是这绝对是未来的趋势,并且当前装机预装系统都是window8了,还用担心兼容吗以后。
代码实例如下:

<!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实现圆角效果一章节。

你可能感兴趣的:(CSS3实现的div圆角效果代码实例)