如何开发圆角输入框
来源:互联网 发布:智能语音软件 编辑:程序博客网 时间:2024/05/02 06:10
把一个input设计成圆角的有很多种方法,比如说做成圆角图片,然后设置input的border-width为0,然后放到北京图片上就可以,但是这种很不方便,首先,圆角图片我都没有找到。另外一种方法是把一个input设置成无宽度,然后去画背景色,这种方法麻烦而且要求的精度比较高,而且还不易移植,可用性非常差。
然后就是CSS3了。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框、文字特效 、多栏布局等。但是目前大众浏览器IE9以下的版本都不支持,而只有Safari、Firefox和Chrome等一些浏览器支持。如果使用CSS3的话,方法就简单多了
一般情况下,定义一个类
.box {
-moz-border-radius:10px;
-webkit-border-radius: 10px;
border-radius: 15px;
}
然后在<input type=”text” class=”box”/>就可以了。其中-moz-border-radius和-webkit-border-radius为CSS3的私有属性。这只是一些比较少得功能,CSS3还有很强大的功能呢,这些期待大家共同学习。
但是在IE中怎么使用呢,毕竟基于IE内核的浏览器还是主流的。这里,为大家提供一个插件,他是一种实用的让IE支持解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角。
首先,下载一个微软的脚本文件,一个名叫ie-css3.htc的文件。;.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX控件)来完成这个功能。
其次,更改相应的CSS样式表,添加圆角属性。
还是上面的那个例子,如果我们想用圆角包围首页的每篇文章,则应该是改动主题style.css里的“ .post”类,如原来“ .post”类是这样定义的:
.post{
background-color: #FFFFFF;
padding:10px 10px 10px;
margin-bottom:10px;
}
则将其改为:
.post{
background-color: #FFFFFF;
padding:10px 10px 10px;
margin-bottom:10px;
border: 2px solid #C0C0C0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:relative;
z-index:2;
behavior: url(此处为ie-css3.htc文件的绝对路径);
}
注意:
1)、behavior的url里一定要填写ie-css3.htc的绝对路径,因为 IE浏览器找该文件是相对当前html文件路径来找的,所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。
2)、一定要有定位属性:position:relative;
3)、因为IE下这些CSS3效果的实现是借助于VML,由VML绘制圆角或是投影效果,所以还需要一个z-index属性。z-index属性最好设置得比较大,如2。
4)、如果在IE下某些模块无法用此渲染,可以试着绝对定位相应的层,即加上“ width: 400px; height:400px;”属性。
5)、radius属性的10px是圆角半径,还可以给两个值如“border-radius: 10px 5px;”,这样则左上角与右下角半径为10px,右上角与左下角半径为5px。也可以赋4个值,为“上 右 下 左”。
当然,以上只不过是简单的实现了一下小功能,后边强大的功能期待与大家共同开发。
- 如何开发圆角输入框
- 网页开发如何弹出式文本(密码)输入框
- Swift开发教程--UITextField输入框如何隐藏软键盘
- android界开发如何禁止密码输入框复制粘贴
- web开发如何屏蔽浏览器输入框下拉历史的输入记录
- 如何隐藏输入框键盘
- 如何让多个输入框对齐
- C#如何弹出输入框
- C#如何弹出输入框
- C#如何弹出输入框
- MathType输入框如何调整
- Android自定义控件开发系列(二)——带清除按钮的圆角输入框
- 使用VS2008开发MFC,如何支持中文输入?
- 使用VS2008开发MFC,如何支持中文输入?
- 使用VS2008开发MFC,如何支持中文输入? .
- android开发(十六) 如何限制 EditText 最大输入字符数
- Android开发如何验证输入的手机号码是否合格
- iOS开发之如何获取各种控件的输入值
- Error[Li005] no definition for "__program_start"
- 主板驱动是干什么的?
- 众所周知红枣就是治疗男性早泄和勃起不坚的药物之一
- Oracle性能调优
- UIview需要知道的一些事情:setNeedsDisplay、setNeedsLayout
- 如何开发圆角输入框
- 嵌入式linux下jffs2文件系统的实现
- ubuntu终止进程的方法
- RAC架构之FAILOVER
- Ajax常使用的方法
- iOS开源项目大全
- OpenGL ES之glRotatef旋转详解
- 2012年7月份的编程语言排行榜
- HTML靓站收藏