我有兴趣制作一个类似于https://new.myspace.com/主页上的html按钮。我知道html看起来像这样:
<button class="button" id="join">Join</button>
虽然我不确定css应该是什么样的。我知道网上有很多关于html按钮的教程,但我不确定半矩形按钮。谢谢,哈里森
答案 0 :(得分:8)
使用border-radius。该示例中的确切代码为border-radius: 4px;
https://developer.mozilla.org/en-US/docs/CSS/border-radius
按照Jake的建议,使用这个全能浏览器规则:
button#join {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
答案 1 :(得分:5)
尝试:
<button class="button" id="join">Join</button>
的CSS:
.button {
/*adjust the roundness*/
border-radius: 4px;
moz-border-radius: 4px;
webkit-border-radius: 4px;
/*adjust height and width*/
height: 20px;
width: 20px;
/*change border colour*/
border:1px #245ec6 solid;
}
调整边框半径属性的像素数量,以便更改它的舍入程度。
编辑:显然您发布的网站使用4px(代码调整)
第二次编辑:对代码进行调整以制作更大的按钮并实现所有按钮。
答案 2 :(得分:0)
以下是有关border-radius的一些信息:http://www.css3.info/preview/rounded-border/
这里有一个很酷的小型生成器,可以让事情变得简单:http://border-radius.com/