2

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

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

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

4

3 回答 3

9

使用边界半径。该示例中的确切代码是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;
}
于 2013-02-23T04:42:59.723 回答
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（代码已调整）

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

于 2013-02-23T04:44:19.707 回答
0

这是关于边界半径的一些信息：http ://www.css3.info/preview/rounded-border/

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

于 2013-02-23T04:43:22.703 回答