将button变成圆形（有弧度）

border-radius可以将button变成圆形，也可以给div加有弧度边框

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><div 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></div></body>
</html>

有时候border-radius会失效

解决办法：万能的!important;

在border-radius属性里面添加 !important，让浏览器首选执行这个语句

border-radius: 6px !important;

CSS中的!important一般都是用于对低版本的除了iE 6 ，用来做hack的，后面缀上了!important的css语句，让浏览器首选执行这个语句，因为css有继承的样式，加上!importanrt可以覆盖父级的样式。

个人网站欢迎来访

http://www.leixingke.com/

将button变成圆形（有弧度）相关推荐

长方形与圆最近连线LISP_圆形与长方形
圆形与长方形完美的弧,平平的角对于Logo设计来说,圆形是一种受欢迎的基础图形.圆形和有机形显得柔和且圆润.相反,牢固稳定的正方形和修长均衡的长方形则会因其摆放位置而显得整齐与对称,但同时也少了一 ...
css3之border-radius理解
在日常项目过程中,border-radius这个属性算是非常常用的属性之一了,通过设置元素的border-radius值,可以轻松给元素设置圆角边框,甚至实现绘制圆.半圆.四分之一的圆等各种圆角图形. ...
border-radius使用详解
我在使用这个属性的时候,一般都是用在给div或者button加上一点圆角弧度,显得好看一点,或者用来画一个圆形div.用的稍微高级一点的,也就是用来画了一个右半圆来做为侧边栏的展开/收缩按钮. 一.b ...
HTML设计美观的菜单栏
border-radius可以将button变成圆形,也可以给div加有弧度边框 border-radius 规则: 一个值: 四个圆角值相同二个值: 四个圆角值相同三个值: 第一个值为左上角与右 ...
mysql lbs 附近的人_一口气说出 4种 LBS “附近的人” 实现方式，面试官笑了
引言昨天一位公众号粉丝和我讨论了一道面试题,个人觉得比较有意义,这里整理了一下分享给大家,愿小伙伴们面试路上少踩坑.面试题目比较简单:"让你实现一个附近的人功能,你有什么方案?" ...
java 画笔粗细_用JAVA做个画笔，有画笔和橡皮功能就行。越简单越好
展开全部新建一个java文件,取名叫做PaintJava.java 代码如下: import java.applet.*; import java.awt.*; import java.awt.ev ...
Android实现一个自己定义相机的界面
我们先实现拍照button的圆形效果哈.Android开发中,当然能够找美工人员设计图片,然后直接拿进来.只是我们能够自己写代码实现这个效果哈.最经常使用的的是用layout-list实现图片的叠加, ...
一口气说出 4种 “附近的人” 实现方式，面试官笑了
引言昨天一位公众号粉丝和我讨论了一道面试题,个人觉得比较有意义,这里整理了一下分享给大家,愿小伙伴们面试路上少踩坑.面试题目比较简单:"让你实现一个附近的人功能,你有什么方案?" ...
axure日期选择器控件_JavaFX 控件 - 输入（Control - Inputs）
本章重点内容介绍JavaFX常用输入控件,从 GitHub 或 Gitee下载详细demo代码. 按钮.单选框.复选框等适用范围根据官方文档 javafx.scene.control 编写,适合 ...

将button变成圆形（有弧度）

将button变成圆形（有弧度）相关推荐

最新文章

热门文章