设计层叠样式表(css)

Question

使用级联样式表（css）编码以获得文本框的圆角

Answer 1

input[type='text']
{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

您也可以尝试这个http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Answer 2

它被称为 border-radius。

如果你想挑剔，可以回到原来的四个分区，每个分区都有一个与背景指定的框不同的角。

CSS：

div.box { background: url(top-left.png) top left no-repeat }
div.box div { background: url(top-right.png) top right no-repeat }
div.box div div { background: url(bottom-right.png) bottom right no-repeat }
div.box div div div { background: url(bottom-left.png) bottom left no-repeat }
div.box div div div div { background: none } // So extra divisions don't add another corner

HTML：

<div class="box"><div><div><div>
Some text, blah blah blah
</div></div></div></div>

我实际上在我的网站上使用了这种方法，然后将边框半径用于不重要的事情，例如输入字段和到处都是的小盒子。

Answer 3

生成您想要的任何内容：http://css3please.com/

Answer 4

.box {
  width: 200px;
  height: 200px;
  background-color: #336698;
  border-radius: 15px;
  margin: 20px auto;
}

<div class="box"></div>