带样式的 CSS3 圆角文本框答案

【问题标题】：CSS3 rounded corner textbox with style带样式的 CSS3 圆角文本框
【发布时间】：2013-03-04 09:07:14
【问题描述】：

我是 css3 的新手，虽然外面有很多 css 工具生成器，但我不知道如何编码我提供的这个图像。请帮忙？？..这将有利于我在我的一个主要科目上的作业。非常感谢！

【问题讨论】：

你卡在哪里了？你试过什么吗？
我只得到圆角，因为我使用了边框半径生成器工具，但我不知道如何编码内阴影效果和一些雕刻边缘效果..
把你现有的复制到jsfiddle.net，这样会更容易帮你

标签： css textbox rounded-corners roundedcorners-dropshadow

【解决方案1】：

在 CSS 中使用 div 标签上的“border-radius”CSS 属性来圆角非常简单，并将图像放置在其中。

您的 HTML 将如下所示：

<div id=image_box>
<img src='someimagelocation'>
</div>

然后，您需要将潜水的大小设置为图像的确切宽度和高度，并确保将溢出设置为隐藏并且设置了边框半径属性：

#image_box {
width:200px;
height:150px;
overflow: hidden;
border-radius:0.5em;
}

这应该会给你想要的结果！

添加：

要添加阴影等，请在同一个 div CSS 标记中使用 CSS 属性“box-shadow”。

box-shadow:0 1px 2px #aaa;

您需要在 Google 上搜索这些语法的工作原理。但我已经为你提供了所有必要的工具来非常容易地研究它

【讨论】：

内阴影和那种雕刻效果怎么样？

【解决方案2】：

诀窍是多次使用box-shadow：

box-shadow: 0 4px 6px -5px hsl(0, 0%, 40%), inset 0px 4px 6px -5px black;

演示：http://jsfiddle.net/wUgXk/1/

如果您使用的是 Google Chrome，请打开 Inspector，单击其中一个值（例如，4px）并按下 Up 和 Down 键.您可以实时调整这些值并快速设置此类效果。

【讨论】：

很好！！，正是结果..你保存了我的任务..非常感谢！我将以此作为参考来了解更多 css3

【解决方案3】：

试试这个

 <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>

【讨论】：

它确实有圆角，但效果（内阴影和雕刻边缘效果）仍然没有

【解决方案4】：

<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;" />

第二个不同风格的文本框

【讨论】：