Question

我有兴趣制作一个类似于https://new.myspace.com/主页上的html按钮。我知道html看起来像这样：

 <button class="button" id="join">Join</button>

虽然我不确定css应该是什么样的。我知道网上有很多关于html按钮的教程，但我不确定半矩形按钮。谢谢，哈里森

Answer 1

使用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;
}

Answer 2

尝试：

<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（代码调整）

第二次编辑：对代码进行调整以制作更大的按钮并实现所有按钮。

Answer 3

以下是有关border-radius的一些信息：http://www.css3.info/preview/rounded-border/

这里有一个很酷的小型生成器，可以让事情变得简单：http://border-radius.com/

圆角，矩形按钮

3 个答案: