css3 border-radius 制作漂亮的圆角按钮
1、新建html文件,创建一个背景为绿色的圆角按钮

2、效果如图

3、改变按钮样式的背景和圆角大小重新创建一个按钮

4、效果如图

5、设置一个边框的圆角按钮

6、效果如图

7、通过设置圆角的位置来设置漂亮的按钮

8、效果如图,可以通过背景色,圆角大小,边框,圆角位置来设置漂亮的按钮
附上源
<title>css3 border-radius 制作漂亮的圆角按钮</title>
</head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1{background:#093; border-radius:6px;}
.button2{background:#06C; border-radius:8px;}
.button3{ border:1px solid #999; border-radius:8px;}
.button4{ border:1px solid #999; background:#333; border-radius:30% 0 30% 0;}
</style>
<body>
<button class="button button1">6px</button>
<button class="button button2">8px</button>
<button class="button button3">8px</button>
<button class="button button4">50%</button>
</body>
