HTML中圆角按钮成效怎样实现 代码是什么
|
很多朋友都对“HTML中圆角按钮效果怎样实现，代码是什么”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！ 1、新建一个html文件，首先body中先输入一个a标签，并插入一个空链接。<a href="#">按钮</a>，然后在title中插入引入内嵌样式的代码<style type="text/CSS"></style>。 代码示例 <!DOCTYPE html> <html> <head> <title>...</title> <style type="text/css"> </style> </head> <body> <a href="#">按钮</a> </body> </html> 2、将a标签添加一个css样式，命名为【btn-style】，并定义按钮的宽、高、背景色、字体颜色、去掉下划线。添加disply:block，不然定义按钮的宽高都不会生效。然后在a标签中引入btn-style样式。 代码示例 <style type="text/css"> .btn-style{ width: 150px; height: 50px; color: #f8ff00; background:#010dfb; text-decoration: none; display: block; } </style> </head> <body> <a href="#">按钮</a> </body> 3、继续添加样式，给按钮定义字体水平居中、垂直居中、字体、字体大小。 代码示例 line-height: 50px; text-align: center; font-size:"微软雅黑"； 4、把按钮的四个角设置成圆角，看起来就更像按钮。 border-radius: 100px; 效果完成，还可以吧。 大家以为border-radius只是圆角吗？其实不是指的是边框所在圆的半径，通过给大家解释border-radius属性参数详解。 属性值得单位可以使用：em、px、百分比等 可以试试看看，把border-radius: 100px变成10px border-radius: 10px 元素的每个圆角的"水平半径"和"垂直半径"都设置为10px。 border-radius可以同时设置1到4个值，如果设置四个值对应左上角、右上角、右下角、左下角。 border-radius: 10px 20px 0px 30px; 以上就是关于“HTML中圆角按钮效果怎样实现，代码是什么”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，小编每天都会为大家更新不同的知识。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
