带风格的CSS3圆角文本框

我是css3的新手，虽然有很多css工具生成器，我不知道如何编码我提供的图像。请帮助吗?? ..这将有利于我的任务在我的主要科目之一。非常感谢！带风格的CSS3圆角文本框

enter image description here

2013-03-04 user2074113

你在哪里卡住了？你有尝试过什么吗？ – Blender 2013-03-04 09:08:34

我只得到圆角，因为我使用边界半径生成器工具，但我不知道如何编码innershadow效果和一些雕刻边缘效果。 – user2074113 2013-03-04 09:12:20

复制你现在到http://jsfiddle.net/和它会更容易地帮助你 – Blender 2013-03-04 09:13:07

的技巧是使用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/

如果你在谷歌浏览器，打开督察，点击其中一个值（4px，例如），并按下最多和向下键。您可以实时调整值并快速设置这些效果。在不同风格

来源

2013-03-04 09:23:55 Blender

尼斯!!，结果确实..你保存了我的任务...感谢很多！我将用它作为参考来学习更多css3 – user2074113 2013-03-04 09:27:32

它在CSS很简单，圆一个div使用的边角上div标签“边界半径” 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;

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

来源

2013-03-04 09:12:30

如何内部阴影和那种雕刻效果？ – user2074113 2013-03-04 09:13:59

好的非常感谢你的大力帮助，这对我有帮助。 – user2074113 2013-03-04 09:19:48

试试这个

<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-04 09:13:25

好吧，我会尽快回复您， – user2074113 2013-03-04 09:14:56

它确实有圆角，但效果（内嵌阴影和雕刻边缘效果）仍然不是 – user2074113 2013-03-04 09:17:42

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

来源

2017-12-03 13:10:28 Thoppil

带风格的CSS3圆角文本框

回答

相关问题