css输入框的圆角
转载：http://jingyan.baidu.com/article/73c3ce28f0b38fe50343d926.html
1.原理是四张圆角的图片放在四个角上，就是圆角矩形的四个角，但这种方法只适合当做菜单栏背景，或是相框背景，输入框的圆角不适合用，当然，这种方法对图片要求比较高！！如果你切图很好的话，这种方法可以用在一切圆角矩形上，缺点很明显，即使图片可以重复利用，也需要大量图片。
优点：图片可以自适应，技术简单，只做网站主页的话，图片就可以大量重复利用，效果相当不错。
第二种方法！
简化第一种方法。将四个图片变成两个图片，上下各一个。
缺点：还是需要图片。而且自适应能力变差，左右不能自适应！！图片需求比较高，需要很好的切图技术！
优点：简化第一种方法，图片数量变小。技术简单，容易操作，更改时只需要换图片，效果就全换了！利用这种方法，建站后维护、更新很方便。
======================
3.
第三种方法！不用图片，纯css+div制作圆角矩形！！
而且对ie也支持！
原理是用8个高度、宽度很小的div块放在上下四角，并且这些div块相互并列，在最外面还有一个div块作为边框包含住这些小的div块，这些小的div块呈白色,其他背景、边框呈黑色，这样看起来矩形的四角就好像圆了。
这个方法非常实用，但是技术难度较高，需要对div+css较熟悉的人才能做到，在这里贴上代码！
代码：
<style>
#mid{ margin:0px 20px; background:#000; font-size:20px;}
div.rtop{ display:block; background:#fff;}
div.rtop div { display:block; height:1px; overflow:hidden; background:#000;}
div.r1{ margin:0 3px;}
div.r2{ margin:0 2px;}
div.r3{ margin:0 1px;}
div.rtop div.r4 { margin:0 1px; height:1px;}
</style>
</head>
<body>
<div id="mid">
<div class="rtop">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
一些内容
<div class="rtop">
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
<!-- 由8个div放在上上下四角做成的圆角矩形。注意div顺序！！ -->
</div>
=============
第四种方法！效果十分好，只是对ie浏览器不兼容。也是纯css+div制作圆角矩形，不需要图片。
颜色渐变是谷歌的一个属性，Firefox也支持，但与圆角无关，就不再叙述。
原理：谷歌浏览器支持一种属性：-webkit-border-radius、-moz-border-radius。
比如bootstrap的输入框、按钮、导航菜单的圆角效果，都是这样做成的！
代码如下：
<style type='text/css'>
div{
text-align: center;
font-size: 32px;
width: 500px;
color: white;
padding: 10px;
margin: 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
</style>
<body>
<div>
一些内容
</div>
</body>
}
最后再次来看看效果图吧！！
css输入框的圆角的更多相关文章
- css+div制作圆角矩形的四种方法
圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...
- 为input输入框添加圆角并去除阴影
<input type="text" name="bianhao" value="" placeholder="请输入商品编 ...
- CSS样式做圆角
我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做: 是什么方式导致这项技术表现得这么了不起呢(What makes this ...
- CSS如何实现圆角的outline效果？
一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价 ...
- css边框内圆角
一.使用两个元素实现 html <div class="parent"> <div class="inset-radius">时代峰峻胜 ...
- CSS图形——实现圆角
css实现圆角 css2.1给元素添加圆角是一件很麻烦的事,老办法是用背景图片实现,制作比较麻烦.css3,border-radius的属性,使圆角属性得到完美的解决. 语法 border-radiu ...
- CSS border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- 纯css手写圆角气泡对话框 微信小程序和web都适用
嗯……我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效 无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了. ...
- 如何用css实现弧度圆角?三角形以及圆形
用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border ...
随机推荐
- php 自带的过滤函数和转义函数
函数名 释义 介绍 htmlspecialchars 将与.单双引号.大于和小于号化成HTML格式 &转成&"转成"' 转成'<转成<>转成> ...
- centos7上搭建ftp服务器（亲测可用）
1．安装vsftpd 首先要查看你是否安装vsftp [root@localhost /]# rpm -q vsftpd vsftpd-3.0.2-10.el7.x86_64 (显示以上相关信息也就安 ...
- 南京网络赛E-AC Challenge【状压dp】
Dlsj is competing in a contest with n (0 < n \le 20)n(0<n≤20) problems. And he knows the answe ...
- Qt::QWidget 无默认标题栏边框的拖拽修改大小方式
开发环境:win10+vs2015+qt5.9.1 背景:开发过程中,一般很少会使用系统提供的标题栏和边框:往往都是自定义一个自己设计的方案.这时候在QWidget中需要加上flag:Qt::Fram ...
- linux shell 正则表达式(BREs,EREs,PREs)差异比较（转）
add by zhj: Python的正则表达式跟Perl很像,Python的re模块文档中也说"This module provides regular expression matchi ...
- POJ3352Road Construction(构造双连通图)sdut2506完美网络
构造双连通图:一个有桥的连通图,如何把它通过加边变成边双连通图? 一个有桥的连通图,如何把它通过加边变成边双连通图?方法为首先求出所有的桥,然后删除这些桥边,剩下的每个连通块都是一个双连通子图.把每个 ...
- mysql++使用
Mysql++是官方发布的.一个为MySQL设计的C++语言的API.Mysql++为Mysql的C-Api的再次封装,它用STL(Standard Template Language)开发并编写,并 ...
- 线程，协程，IO模型
理论: 1.每创造一个进程,默认里面就有一个线程 2.进程是一个资源单位,而进程里面的线程才是CPU上的一个调度单位 3.一个进程里面的多个线程,是共享这个进程里面的资源的 4.线程创建的开销比进程要 ...
- 6.1 Controllers -- Introduction
一.Controllers 1. 在Ember.js中,controllers允许你使用展现逻辑装饰你的models.通常,models将会有保存到服务器的属性,然而controllers将会有不需要 ...
- （13）如何使用Cocos2d-x 3.0制作基于tilemap的游戏：第一部分
引言 程序截图: 本教程将会教大家如何使用Cocos2d-x来做一个基于tile地图的游戏,当然还有Tiled地图编辑器.(我们小时候玩的小霸王小学机里面的游戏,大部分都是基于tile地图的游戏,如坦 ...