2

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

在此处输入图像描述

4

4 回答 4

4

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

您的 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;

您将需要谷歌这些语法是如何工作的。但是我已经给了你所有必要的工具来很容易地研究它

于 2013-03-04T09:12:30.663 回答
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键。您可以实时调整这些值并快速设置这些效果。

于 2013-03-04T09:23:55.440 回答
1

试试这个 

 <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>
于 2013-03-04T09:13:25.843 回答
0 
<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;" />

不同风格的第二个文本框

于 2017-12-03T13:10:28.700 回答