css 图片圆角输入框

最新推荐文章于 2024-04-12 22:35:54 发布
最新推荐文章于 2024-04-12 22:35:54 发布
阅读量5.1k 收藏
点赞数
文章标签： css input border html url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dududu01/article/details/6081954
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd ">
Html代码

1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4. <title>Insert title here</title>
5. <style type="text/css">
6. input {
7. border:0px;
8. background-image:url(images/long-input.png);
9. background-repeat:no-repeat;
10. background-position-x:right;
11. padding-left:3px;
12. padding-right:3px;
13. height:18px;
14. font-size:11px;
15. width:70px;
16. }
17. </style>
18. </head>
19. <body>
20. <form>
21. <input value="Hellokitty"/>
22. </form>
23. </body>
24. </html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
input {
border:0px;
background-image:url(images/long-input.png);
background-repeat:no-repeat;
background-position-x:right;
padding-left:3px;
padding-right:3px;
height:18px;
font-size:11px;
width:70px;
}
</style>
</head>
<body>
<form>
<input value="Hellokitty"/>
</form>
</body>
</html>



实现思路如下：

1.使用border:0px;去掉input框默认的边框

2.制作一个圆角的输入框，并设定为input的背景图片并且设定background- repeat:no-repeat;以不让背景图片重复

3.由于是使用固定的背景制作圆角，因此需要设定固定的height:18px;font-size:11px;font-size:11px;


4.发现输入框中的内容压在了左边的背景图片上，因此使用padding- left:3px;使内容有一定的左边距padding-right:3px;同理



也就是说当输入文字过多的时候，背景图片随着左移了，此时设置一个关键字属性background-position-x:right;就可已完成预期的效果了



总结：

使用背景图片制作圆角框实现机理简单，但是灵活性不大，因此对于那些需要改变宽高的圆角输入框来说只能制作多张图片，灵活性较差，但是对于不需要改变宽高，大小一致的圆角输入框来说，是一种简单有效的方式。大家也可以分享一下其他的实现方式，比较一下~

零度空间0520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css圆角边框
jjlome的博客
11-20 148
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <!--在css3中，新增了圆角边框样式，这样我们的盒子可以变圆了--> <!--border-radius 属性用于设置元素的外边框圆角-->
css基础
m0_72711350的博客
11-03 441
css
css圆角输入框
weixin_30765505的博客
11-05 333
对应的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Html代码 <html> <head> <metahttp-equiv="Cont...
css输入框的圆角
02-03 936
转载：http://jingyan.baidu.com/article/73c3ce28f0b38fe50343d926.html 1.原理是四张圆角的图片放在四个角上，就是圆角矩形的四个角，但这种方法只适合当做菜单栏背景，或是相框背景，输入框的圆角不适合用，当然，这种方法对图片要求比较高！！如果你切图很好的话，这种方法可以用在一切圆角矩形上，缺点很明显，即使图片可以重复利用，也需...
圆角输入框
Simoon
02-18 710
input { height:18px; inline-height:18px; font-size:11px; width:70px; text-align:center; border:#ccc 1px solid; //关键 border-radius: 5px; /* css 3标准 */
css 圆角 输入框
Prothi
12-21 304
前一段时间，项目主要集中于前端页面的开发，对于Css样式也学习了很多，其中有一项就是制作一个圆角输入框： 对应的代码：  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&...
14种CSS3炫酷表单input输入框美化效果
12-20
1. **边框动画效果**：通过CSS3的`border-radius`属性，可以创建圆角输入框，增强视觉舒适度。同时，利用`transition`和`animation`属性可以实现边框颜色的渐变或动态变化，增加表单的动态感。 2. **背景渐变**：...
CSS+Jquery实现页面圆角框方法大全
10-29
3. 图片圆角框 这种方法通过使用四个角图或一张圆角图片来表现圆角效果。它简单且兼容性好，圆角非常平滑，无锯齿现象。但缺点是需要为每个不同大小和样式的圆角框准备不同的图片资源，增加了资源的维护量。 4. VML...
CSS3使用border-radius属性制作圆角
09-25
在提供的示例代码中，`.loginbox li input`类的样式展示了如何应用border-radius属性来创建圆角输入框。`border-radius: 6px;`这一行代码使得输入框的四角都变为6像素的圆角。 然而，示例中的`.loginbox li input....
圆角输入框 html,jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
weixin_35702486的博客
06-04 345
本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码。分享给大家供大家参考。具体如下：这里实现圆角表单，圆角输入框，无刷新验证，漂亮唯美，是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括，用HTML5可以实现很多超乎寻常的效果，从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5，正悲哀着呢。先来看看运行效果截图：在线...
CSS input 框加框圆角
weixin_42591908的博客
02-12 104
可以使用 CSS 的 border-radius 属性来实现 input 框的圆角。示例代码如下： input { border-radius: 10px; }
圆角的输入框
zzf0521的博客
07-11 347
//路径 在res/drawable/**** &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp"&am
CSS 圆角输入框
Hi, Sun
02-04 1028
ff,chrome,safari下面可以用圆角边框来实现，IE下面还是用背景比较好  Java代码   input {                     height:18px;             inline-height:18px;                   font-size:11px;                     width:...
CSS边框圆角
卑微人的博客
02-21 533
CSS边框圆角 圆角的一些设置： /* 圆角边框 */ /* 正方形把高度设置为盒子的一半就的圆 */ border-radius: 15px; 盒子的阴影:
设置圆角的输入框
dengtou9505的博客
09-23 773
<style> .tbradius{ border-color: #e2e2e0;//设置边框的颜色 border-width: 1px;//设置边框的宽度 border-style: solid;//设置边框的样式，此处为实线 border-radius: 0.4em;//圆角的程度，可以自行测试需要的样式} </style> //...
CSS系列之圆角边框（CSS3）
热门推荐
老__L的博客
01-30 1万+
本文主要介绍CSS的border-bottom-left-radius、border-bottom-right-radius、border-radius、border-top-left-radius、border-top-right-radius属性。圆角边框（CSS3）
[转]利用css3打造无图片圆角输入框
PandaraWen 宝盒
11-05 419
原文：http://www.freeislife.com/css-input-radius/ 还在为如何实现无图片的圆角输入框而烦恼吗，其实用css3新添加的radius属性就能轻松结局这个问题。其中-webkit-border-radius: 5px; 是chrome和safari的专有属性，-moz-border-radius: 5px;是firefoe的专有属性，当然，万恶的IE6是不支持这
CSS基础：border-radius圆角边框的4种写法规则以及网页实战应用的3个场景
最新发布
u013179804的博客
04-12 5368
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集265篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中上文说完border边框，这篇说一下圆角边框。属性用于设置元素的圆角边框效果。通过指定属性，可以使元素的边框呈现圆角而不是直角。比如，下图淘宝的登录，注册，开店按钮。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值