懂科普js圆角按钮怎么写
- 综合知识
- 关注：1.7W次
<script type="text/javascript">
window.onload = function()
{
settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: false
}
var divObj = document.getElementById("myDiv");
var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
}
</script>
settings = {
tl: { radius: 20 },
tr: { radius: 40 },
bl: { radius: 60 },
br: { radius: 80 },
antiAlias: true,
autoPad: false
}
或者：
settings = {
tl: { radius: 20 },
tr: false,
bl: false,
br: { radius: 80 },
antiAlias: true,
autoPad: false
}
龙信网络提供（>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>；圆角按钮</title>
<style>
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
</style>
</head>
<input type="button" id="button_equal" class="btn" value="我是圆角按钮">
<body>
</body>
</html>
3.如何用CSS代码设定按钮的圆角样式用CSS代码设定按钮的圆角样式，这个在css3中才能实现，通过使用border-radius来实现这个效果，不过有浏览器的兼容性问题，-moz（例如 -moz-border-radius）用于Firefox;-webkit（例如：-webkit-border-radius）用于Safari和Chrome;border-radius:5px 15px 20px 25px；它的意思就是上的圆角5px，右的圆角15px，下的圆角20px，左的圆角25px，通过例子来实际看下：#round { padding:10px; width:300px; height:50px; border: 5px solid #dedede; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */}效果如图：。
4.怎样设置BUTTON的圆角很多人都知道，通常设置一个 Button后者其他的UIView子类的圆角，需要使用如下的语句
<span>self.button.layer.cornerRadius=10；//即可</span><span>；说明：这会用到layer图层的属性来实现，原因是在一个 UIView子类中</span>
5.css圆角如何写,不要js,不要用br或者是div拼接起来的,要纯css代码根据你所要求的，我只有两种办法：
第一种：
border-width:1px;
border-style:solid;
-moz-border-radius:11px;
-khtml-border-radius:11px;
-webkit-border-radius:11px;
border-radius:11px;
padding:5px;
以上的css属性控制一个div就有圆角框了，但部分浏览器不支持。
第二种：
将背景直接用一个圆角图片替换，此方法最简单
- 文章版权属于文章作者所有，转载请注明 https://dongkepu.com/zonghezhishi/yj7ym5.html
