css样式怎么把按钮变圆
导读:收集整理的这篇文章主要介绍了css样式怎么把按钮变圆,觉得挺不错的,现在分享给大家,也给大家做个参考。css样式把按钮变圆的方法:首先创建一个HTML示例文件;然后定义一个button按钮;最后通过css中的“border-radius”属...
收集整理的这篇文章主要介绍了css样式怎么把按钮变圆,觉得挺不错的,现在分享给大家,也给大家做个参考。css样式把按钮变圆的方法:首先创建一个HTML示例文件;然后定义一个button按钮;最后通过css中的“border-radius”属性将按钮四角设置为圆角即可。
本教程操作环境:windows7系统、HTML5& & CSS3版、Dell G3电脑。
将button变成圆形(有弧度)
border-radius可以将button变成圆形,也可以给p加有弧度边框
border-radius 规则:
一个值: 四个圆角值相同
两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
样式:
!DOCTYPE html> html> head> meta charset="UTF-8"> tITle> /title> style type="text/css"> .BTn{ width: 100px; height: 30px; background: green; border: none; color: white; margin: 6px 10px; } .btnStyle1{ border-radius: 6px; } .btnStyle2{ border-radius: 26px 6px; } .btnStyle3{ border-radius: 6px 26px 60px; } .btnStyle4{ border-radius: 6px 126px 236px 346px; } .bolder{ border: solid 1px green; width: 500px; height: 40px; border-radius: 10px; } /style> /head> body> p class="bolder"> button class="btn btnStyle1"> 按钮1/button> button class="btn btnStyle2"> 按钮2/button> button class="btn btnStyle3"> 按钮3/button> button class="btn btnStyle4"> 按钮4/button> /p> /body> /html>
有时候border-radius会失效
解决办法:万能的!important;
在border-radius属性里面添加 !important,让浏览器首选执行这个语句
border-radius: 6px !important;
CSS中的!important一般都是用于对低版本的除了iE 6 ,用来做hack的,后面缀上了!important的css语句,让浏览器首选执行这个语句,因为css有继承的样式,加上!importanrt可以覆盖父级的样式。
推荐:《HTML视频教程》
以上就是css样式怎么把按钮变圆的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css样式怎么把按钮变圆
本文地址: https://pptw.com/jishu/588701.html