转载：http://jingyan.baidu.com/article/73c3ce28f0b38fe50343d926.html

1.原理是四张圆角的图片放在四个角上，就是圆角矩形的四个角，但这种方法只适合当做菜单栏背景，或是相框背景，输入框的圆角不适合用，当然，这种方法对图片要求比较高！！如果你切图很好的话，这种方法可以用在一切圆角矩形上，缺点很明显，即使图片可以重复利用，也需要大量图片。

优点：图片可以自适应，技术简单，只做网站主页的话，图片就可以大量重复利用，效果相当不错。

 
==============================
2.

第二种方法！

简化第一种方法。将四个图片变成两个图片，上下各一个。

缺点：还是需要图片。而且自适应能力变差，左右不能自适应！！图片需求比较高，需要很好的切图技术！

优点：简化第一种方法，图片数量变小。技术简单，容易操作，更改时只需要换图片，效果就全换了！利用这种方法，建站后维护、更新很方便。

======================

3.

  1. 第三种方法！不用图片，纯css+div制作圆角矩形！！

    而且对ie也支持！

    原理是用8个高度、宽度很小的div块放在上下四角，并且这些div块相互并列，在最外面还有一个div块作为边框包含住这些小的div块，这些小的div块呈白色,其他背景、边框呈黑色，这样看起来矩形的四角就好像圆了。

    这个方法非常实用，但是技术难度较高，需要对div+css较熟悉的人才能做到，在这里贴上代码！

  2.  

    代码：

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

    =============

    1.  

    2. 第四种方法！效果十分好，只是对ie浏览器不兼容。也是纯css+div制作圆角矩形，不需要图片。

      颜色渐变是谷歌的一个属性，Firefox也支持，但与圆角无关，就不再叙述。

      原理：谷歌浏览器支持一种属性：-webkit-border-radius、-moz-border-radius。

      -webkit-border-radius：苹果、谷歌等一些浏览器有，因为他们都用的是webkit内核。webkit内核浏览器都支持此属性。-moz-border-radius：moz这个属性主要专门支持Firefox浏览器的CSS属性。这种方法可以设置任何矩形变成圆角矩形！

      比如bootstrap的输入框、按钮、导航菜单的圆角效果，都是这样做成的！

      但缺点很明显：在IE下不能用，这就需要设计者进行CSS HACK，为IE专门设计一套圆角样式（前三种方法）。

      所以将这四种方法结合起来用才是最好的！

    3.  

      代码如下：

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

      }

    4.  

      最后再次来看看效果图吧！！

css输入框的圆角的更多相关文章

  1. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  2. 为input输入框添加圆角并去除阴影

    <input type="text" name="bianhao" value="" placeholder="请输入商品编 ...

  3. CSS样式做圆角

    我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做:  是什么方式导致这项技术表现得这么了不起呢(What makes this ...

  4. CSS如何实现圆角的outline效果？

    一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价 ...

  5. css边框内圆角

    一.使用两个元素实现 html <div class="parent"> <div class="inset-radius">时代峰峻胜 ...

  6. CSS图形——实现圆角

    css实现圆角 css2.1给元素添加圆角是一件很麻烦的事,老办法是用背景图片实现,制作比较麻烦.css3,border-radius的属性,使圆角属性得到完美的解决. 语法 border-radiu ...

  7. CSS border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  8. 纯css手写圆角气泡对话框 微信小程序和web都适用

    嗯……我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效 无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了. ...

  9. 如何用css实现弧度圆角?三角形以及圆形

    用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border ...

随机推荐

  1. Requested bean is currently in creation: Is there an unresolvable circular reference?

    spring容器初始化报错:循环依赖,错误信息如下: Requested bean is currently in creation: Is there an unresolvable circula ...

  2. Java开发环境的搭建（jdk,eclipse）

    一.java 开发环境的搭建 这里主要说的是在windows 环境下怎么配置环境. 1.首先安装JDK java的sdk简称JDK ,去其官方网站下载最近的JDK即可. http://www.orac ...

  3. 关于cdn原理(就是内容分发网络)

    cdn,我理解其本质就是为了解决距离远产生的速度问题,使用就近的服务. 从中国请求美国一台服务器上的图片.一般比较慢,因为距离这么远,网络传输是存在损耗的,距离越远,传输的时间就越长.一般会看到浏览器 ...

  4. Oracle等待事件之db file sequential read/ db file parallel read

    1.产生原因 db file sequential read这个是非常常见的I/O 相关的等待事件.表示发生了与索引扫描相关的等待.意味着I/O 出现了问题,通常表示I/O竞争或者I/O 需求太多. ...

  5. 最近遇到的bug

    1. 地图周边快查,按钮点击没反应 子控件超出了父控件 2.图片显示灰色背景,一直去不掉    设置图片背景图片clear cloro  3. 显示隐藏导航栏  下面两个方法效果不同     self ...

  6. django的crontab

    最近需要考虑如何在django环境中跑定时任务. 这个在  stackoverflow 也有对应的 讨论 , 方法也有不少, 这边简单尝试和总结下. 假设我们现在的定期任务就是睡眠  n 秒, 然后往 ...

  7. （2.4）DDL增强功能-数据汇总grouping、rollup、cube

    参考:https://www.cnblogs.com/nikyxxx/archive/2012/11/27/2791001.html 1.rollup (1)rollup在group by 子句中使用 ...

  8. ssh 配置文件讲解大全 ssh调试模式 sftp scp strace进行调试 特权分离

    ssh 配置文件讲解大全  ssh调试模式  sftp scp strace进行调试  特权分离 http://blog.chinaunix.net/uid-16728139-id-3265394.h ...

  9. Cardano(ADA)， EOS, RChain(RHOC), Aeternity(AE) 都是极其好的币

    从区块链的基础知识出发,研究ETH和EOS的区别 免责声明:EOS目前还在开发中,我们对此项目的一些理解可能会改变.而且,我并不是以太坊开发者,而只是一个喜欢区块链的爱好者.请牢记这两点,请把下面的内 ...

  10. [华为]查找两个字符串a，b中的最长公共子

    链接:https://www.nowcoder.com/questionTerminal/181a1a71c7574266ad07f9739f791506来源:牛客网 查找两个字符串a,b中的最长公共 ...