Question

我是css3的新手，虽然有很多css工具生成器，但我不知道如何编码我提供的这个图像。请帮忙吗？..这将有利于我对我的一个主题的任务。非常感谢！

enter image description here

Answer 1

在CSS中使用div的角落非常简单，在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;

您需要谷歌这些语法如何工作。但是我已经为你提供了所有必要的工具来轻松地研究它

Answer 2

诀窍是多次使用box-shadow：

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

enter image description here

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

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

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

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

不同风格的第二个文本框

带有样式的CSS3圆角文本框

4 个答案: