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

作者:没什么大不了 | 创建时间: 2023-07-19
css3  border-radius 制作漂亮的圆角按钮...
css3 border-radius 制作漂亮的圆角按钮

操作方法

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

效果如图

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

效果如图

设置一个边框的圆角按钮

效果如图

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

效果如图,可以通过背景色,圆角大小,边框,圆角位置来设置漂亮的按钮 附上源 <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>

点击展开全文

更多推荐