css输入框的圆角

转载: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.  

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

时间: 2024-10-10 17:06:09

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

纯CSS实现漂亮圆角阴影边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>[荐]纯CSS实现漂亮圆角阴影边框_潜水射

为Input输入框添加圆角并去除阴影 去除获得焦点时方角样式

目录 1.为Input输入框添加圆角并去除阴影 2.去除获得焦点时方角样式 内容 1.为Input输入框添加圆角并去除阴影 1.1 border-radius不同浏览器下兼容设置: .boder-radius{ -webkit-border-radius:6px;//适配以webkit为核心的浏览器(chrome.safari等) -moz-border-radius:6px;//适配firefox浏览器 -ms-border-radius:6px;//适配IE浏览器 -o-border-rad

CSS滑动门圆角

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS滑动门圆角</title> <style type="text/css"> .huadong{ width:500px; border:1px solid #ccc;  line-height:50px; padding-top:20px;} .huadong

实用的css自适应宽度圆角按钮图标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

css输入框文字点击消失输入文字颜色变深JQ特效

css输入框文字点击消失输入文字颜色变深JQ特效,输入框原始有默认说明文字内容,鼠标点击输入框后文字消失,鼠标离开默认文字又显示,如果输入框输入新文字内容,新输入文字颜色变深变化. CSS输入框文字点击消失输入文字颜色变深效果截图 输入框原始文字与输入文字颜色变化说明:上海治疗阳痿哪家好默认输入框文字颜色比较浅,鼠标点击输入框内原始文字消失,鼠标离开原始文字又显示,如果新输入文字,此时新输入文字颜色有变化(根据需要可以设置). 使用说明上海最好的性病医院:输入框默认的文字与input.js里代码

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

<input type="text" name="bianhao" value="" placeholder="请输入商品编号" maxlength="10" size="10" style="width:105px; margin:0px 0px 0px 12px;height:22px;border-radius:4px; border:1px solid #DBDB

通过css阴影、圆角、渐变制作各种按钮

今天我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,span,p,a,button,input等等. 这些纯CSS代码制作的按钮大小可以根据字体大小自动调整,渐变色背景可以兼容各浏览器,并且有正常.鼠标滑向.点击三种状态样式,当然,如果您的浏览器不支持CSS3,那么按钮将没有圆角和阴影效果. CSS3特性 首先我们熟悉下CSS3是如何实现圆角和阴影效

纯CSS实现的圆角折叠菜单特效代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS圆角折叠菜单</title> <style type="text/css"> #menu { font-size:12px; height:380px; margin:0; padding

CSS样式做圆角

我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做:  是什么方式导致这项技术表现得这么了不起呢(What makes this technique cool)? 通过可变的宽度和高度处理毗邻的元素的能力.没有极限.(The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.)这项技术,正如我