CSS 带样式的 CSS3 圆角文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15197925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 rounded corner textbox with style
提问by user2074113
Im a newbie of css3, although there are a lot of css tool generators outhere, i dont't know how to code this image i provide. Kindly help please??..This will benefit my assignment on one of my major subject. Thanks a lot!
我是 css3 的新手，虽然外面有很多 css 工具生成器，但我不知道如何编码我提供的这个图像。请帮助？非常感谢！
回答by Simon Sebastian Vollmer
it's very simple in CSS to round the corners of a div use 'border-radius' CSS property on the div tag and place the image within it.
在 CSS 中使用 div 标签上的“border-radius”CSS 属性来圆角 div 的角非常简单，并将图像放置在其中。
Your HTML will look like this:
您的 HTML 将如下所示：
<div id=image_box>
<img src='someimagelocation'>
</div>
You will then want to set the size of the dive to the exact width and height of the image and ensure that overflow is set to hidden and that your border radius property is set:
然后，您需要将下潜的大小设置为图像的确切宽度和高度，并确保将溢出设置为隐藏并设置您的边框半径属性：
#image_box {
width:200px;
height:150px;
overflow: hidden;
border-radius:0.5em;
}
this should give you your desired result!
这应该会给你你想要的结果！
ADDED:
添加：
To add dropshadow etc, use the CSS property 'box-shadow' in the same div CSS tag.
要添加阴影等，请在同一个 div CSS 标签中使用 CSS 属性“box-shadow”。
box-shadow:0 1px 2px #aaa;
You will need to google how these syntax work. But I have given you all the necessary tools to research it very easily
您将需要谷歌这些语法是如何工作的。但是我已经给了你所有必要的工具来很容易地研究它
回答by Blender
The trick is to use box-shadowmultiple times:
诀窍是box-shadow多次使用：
box-shadow: 0 4px 6px -5px hsl(0, 0%, 40%), inset 0px 4px 6px -5px black;
Demo: http://jsfiddle.net/wUgXk/1/
演示：http: //jsfiddle.net/wUgXk/1/
If you're on Google Chrome, open up Inspector, click on one of the values (4px, for instance) and press your Upand Downkeys. You can tweak the values in real time and setup these kinds of effects pretty quickly.
如果您使用的是 Google Chrome，请打开 Inspector，单击其中一个值（4px例如）并按您的Up和Down键。您可以实时调整值并快速设置这些类型的效果。
回答by Rn.
Try this
尝试这个
<html>
<html>
<head>
<style type="text/css">
.tbox
{
border:2px solid #b3b3b3;
background:#dddddd;
width:200px;
border-radius:25px;
-moz-border-radius:25px;
-moz-box-shadow: 1px 1px 1px #ccc;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 2px 2px 2px #ccc;
}
</style>
</head>
<body>
<input type="text" class="tbox" />
</body>
</html>
回答by Thoppil
<input type="text" placeholder="Your Name" style="text-align:center; color:white; background:black; border-radius:50px; height:30;" />
<input type="email" placeholder="Enter your email id" style="text-align:center; color:white; background:black; border-radius:50px 5px 50px; height:30;" />
Seccond textbox in Different style
不同风格的第二个文本框
