https://blog.csdn.net/csdnluolei/article/details/83933202
border-RADIUS can be turned into a circular button, a border may be added to the arc div
border-radius rule:
Value: the value of the same four rounded corners
Two values: a first value of the upper left corner and the lower right corner, bottom left corner and top right corner of the second value
Three values: a first value of the top left, top right and bottom left is the second, the third is the lower right corner
Four values: a first value of the upper left corner, upper right corner of the second value, the third value is the lower right corner, lower left corner of the fourth value.
style:
-
<!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>
Sometimes border-radius fail
! The solution: a panacea important;
Add the border-radius property inside ! Important , let the browser of choice for the implementation of this statement
border-radius: 6px !important;
The CSS! Important are generally used for low version except iE 6, used to do the hack, back laden with! Important statement of css, so the browser of choice for the implementation of this statement, because there are inherited css styles, plus on! importanrt can override the parent's style.
