手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

css3 border-radius 制作漂亮的圆角按钮

时间:2024-10-30 16:33:18

1、新建html文件,创建一个背景为绿色的圆角按钮

css3 border-radius 制作漂亮的圆角按钮

2、效果如图

css3 border-radius 制作漂亮的圆角按钮

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

css3 border-radius 制作漂亮的圆角按钮

4、效果如图

css3 border-radius 制作漂亮的圆角按钮

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

css3 border-radius 制作漂亮的圆角按钮

6、效果如图

css3 border-radius 制作漂亮的圆角按钮

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

css3 border-radius 制作漂亮的圆角按钮

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>

css3 border-radius 制作漂亮的圆角按钮
© 手抄报圈