CSS3
圆角属性 border-radius

在 CSS3 中新增了一个 border-radius 边框半径属性，即大家常用的圆角效果。这使得制作圆角将不再麻烦，只需对所用对象加一个 border-radius 属性即可，不必使用图片定位或冗余代码完成了。不过它的使用瓶颈目前也是显而易见的，因为效果显示需支持 CSS3 的现代浏览器，而在一些老版本浏览器上则无法显示，如IE8及以下浏览器就不行。

CSS3 圆角属性 border-radius 使用方法：

同时设置四个圆角只需给出一个值即可：border-radius: 10px;

也可以同时单独设置每一个圆角（顺时针方向）：border-radius: 10px 5px 15px 20px;

如果只需设置一个圆角，可以写单独CSS设置：

border-top-left-radius: 10px;

border-top-right-radius: 5px;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 20px;

还可以每两个圆角设置，即左上右下一个值，右上左下一个值：border-radius: 10px 5px;

CSS3 圆角属性 border-radius 使用注意：

CSS3 部分属性在某些旧版本浏览器上的对应设置有时也不一样，有自己的私有属性，比如部分属性在Firefox上应用需要加上-moz-、Safari以及Google Chrome需加上-webkit-、Opera需加上-o-、Internet Explorer 9需加上-ms-。不过这些问题随着 CSS3 发布推荐标准后，这些浏览器在新版本上都已经做了修改，以支持 CSS3 原生属性。

为了照顾这些旧版本浏览器的浏览，我们可以一并加上这些私有属性。注意，border-radius 需放在最后面，不然可能会失效。如下（border-radius 属性Opera和IE不用设置）：

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

此外还需注意的是，Firefox旧版本上的 border-radius 单个圆角属性名称也不一样，它们分别是：

-moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 5px;

-moz-border-radius-bottomleft: 15px;

-moz-border-radius-bottomright: 20px;

最后还有一点要提示的是：设置 border-radius 属性，最好每个圆角都采用相同的值，如果分别设置，可能在不同浏览器上渲染效果可能会有细微差别

  1. <!--html5的标准-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>css3按钮圆边（http://www.manongjc.com）</title>
  7. <style>
  8.   .font-label{
  9.      font-weight: bold;
  10.   }
  11.  
  12.   .input-text{
  13.      border: 1px solid #C3CED9;
  14.   border-radius: 5px 5px 5px 5px;/**左上角-右上角-左下角-右下角*/
  15.   }
  16.   .btn-login{
  17.     cursor: pointer;
  18.     display: inline-block;
  19.     position: relative;
  20.     border-radius: 2px;
  21.     font-weight: lighter;
  22.     width:88px;
  23.     padding-top: 0px 2px ;
  24.     margin-bottom:  0px 2px;
  25.     -moz-border-radius: 50px;/**兼容火狐浏览器*/
  26.     -webkit-border-radius: 50px;/**兼容苹果；谷歌，等一些浏览器认*/
  27.     -o-border-radius: 50px;/**兼容opera浏览器*/
  28.     background-color:#03F;
  29.     margin:0 0 0 10px;
  30.     /***背景色渐变**/
  31.     background:-webkit-linear-gradient(top,#03F,#9dccdc);
  32.     background: -moz-linear-gradient(top,#03F,#9dccdc);
  33.     background:-o-linear-gradient(top,#03F,#9dccdc);
  34.     background:linear-gradient(top,#03F,#9dccdc);
  35.   }
  36.  
  37. </style>
  38. </head>
  39.  
  40. <body>
  41.  
  42.     <div align="center">
  43.       <span class="font-label">用户名:</span>
  44.         <input type="text" placeholder="请输入用户名" class="input-text"/>
  45.         <br/>
  46.   <span class="font-label">密  码:</span>
  47.  
  48.         <input type="text" placeholder="请输入密码"  class="input-text"/>
  49.          <br/>
  50.         <input type="reset"  class="btn-login" value="重置" />
  51.     	<input type="button"  class="btn-login" value="登录" /> 
  52.  
  53.     </div>
  54.  
  55. </body>
  56. </html>

参考阅读：

http://www.manongjc.com/article/1200.html

http://www.manongjc.com/article/1202.html

CSS3 圆角属性 border-radius和-webkit-border-radius使用的更多相关文章

  1. border-radius 样式表CSS3圆角属性

    border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...

  2. IE9、 Firefox、Safari, Chrome的CSS3圆角属性

    这篇文章主要是记录一下,微软最新发布的 IE9 浏览器CSS 圆角属性,现在CSS3已经 可以轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端 浏览器. ...

  3. 让IE浏览器支持CSS3圆角属性的方法

    绘出圆角: 1.下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar:.htc 文件是IE内核支持Web行为 ...

  4. [HTML] CSS3 圆角

    使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". CSS3 border-radius 属性 使用 CSS3 border-radius 属性,你 ...

  5. css3部分属性兼容性别扭写法（因为很多我就叫他别扭了，希望全面早早支持css3吧）

    /*圆角class,需要设置圆角的元素加上class名称*/ .roundedCorners{ -webkit-border-radius: 10px;/*webkit内核浏览器*/ -moz-bor ...

  6. CSS3：CSS3 圆角

    ylbtech-CSS3:CSS3 圆角 1.返回顶部 1. CSS3 圆角 CSS3 圆角 使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". C ...

  7. 使用 CSS3 的 box-sizing 属性设置元素大小包含 border 与 padding

    Ø  默认情况下,内部元素(如:input)的宽度或高度,是不会包含元素的边框和内边距的,这时就需要使用 box-sizing 属性设置该元素. Ø  box-sizing 是 CSS3 的属性,可以 ...

  8. css3中的圆角属性

    圆角属性:border-radius <style type="text/css"> .content{ border: 1px solid green; width: ...

  9. CSS3 border-radius 圆角属性

    使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. -webkit- 或 -moz- ...

随机推荐

  1. WEB接口测试之Jmeter接口测试自动化 （四）

    Jmeter是压力测试.接口测试工具,Ant是基于Java的构建工具,具有跨平台的作用,jenkins是持续集成工具.将这三者结合起来可以搭建一套webservice接口测试的持续构建环境.   1. ...

  2. 7.3 5种IO模型与IO复用

    5种IO模型分别如下: 1.阻塞IO模型 当上层应用app1调用recv系统调用时,如果对等方没有发送数据(缓冲区没有数据),上层app1将阻塞(默认行为,被linux内核阻塞). 当对等方发送了数据 ...

  3. SMON进程、PMON进程、LGWR/ARCH

    SMON 进程:system monitor instance monitor 系统监控.实例监控进程 说明及作用:在实例关闭时,会清理临时段,整理空闲空间free space; 实例非正常关闭后,启 ...

  4. 原生JS 的cookie和jq的cookie,

    COOKIE基础及应用:1.什么是COOKIE==>页面用来保存信息,比如:自动登录,记住用户名2.COOKIE的特性:  --同一个网站中,所有的页面共享同一套cookie  --数量,大小有 ...

  5. Python实现不同格式打印九九乘法表

    前言:最近在学习Python,学习资源有慕课网上的视频教程.菜鸟教程以及Python官方文档tutorial.虽然了解了Python的基本语法,但是还没有真正意义上输出自己写的代码.代码小白,之前仅学 ...

  6. CH4101 银河英雄传说

    题意 4101 银河英雄传说 0x40「数据结构进阶」例题 描述 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展.  宇宙历七 ...

  7. 做Global Admin

    globaladmin.4budget@nokia.com 10:22 https://ultima.int.net.nokia.com/eedb/Solutions/tools/ManageUser ...

  8. solr相关

    http://www.cnblogs.com/arli/ 博主介绍: 武汉理工大学计算机系 华为java工程师 华为企业版Hadoop工程师 华为大数据解决方案架构师 国盛天丰软件工程师

  9. ActiveMQ默认协议和IO模型优化

    在ActiveMQ的官方网站上,列出了目前ActiveMQ中支持的所有消息协议,它们是:AMQP.MQTT.OpenWire.REST.Stomp.XMPP: 不同的协议需要设置不同的网络监听端口,这 ...

  10. 【转】RS232、RS485、TTL电平、CMOS电平

    原文网址:http://blog.sina.com.cn/s/blog_63a0638101018grc.html RS232.RS485.TTL电平.CMOS电平 什么是TTL电平.CMOS电平.R ...