CSS3 圆角属性 border-radius和-webkit-border-radius使用
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 属性，最好每个圆角都采用相同的值，如果分别设置，可能在不同浏览器上渲染效果可能会有细微差别
<!--html5的标准-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3按钮圆边（http://www.manongjc.com）</title>
<style>
.font-label{
font-weight: bold;
} .input-text{
border: 1px solid #C3CED9;
border-radius: 5px 5px 5px 5px;/**左上角-右上角-左下角-右下角*/
}
.btn-login{
cursor: pointer;
display: inline-block;
position: relative;
border-radius: 2px;
font-weight: lighter;
width:88px;
padding-top: 0px 2px ;
margin-bottom: 0px 2px;
-moz-border-radius: 50px;/**兼容火狐浏览器*/
-webkit-border-radius: 50px;/**兼容苹果；谷歌，等一些浏览器认*/
-o-border-radius: 50px;/**兼容opera浏览器*/
background-color:#03F;
margin:0 0 0 10px;
/***背景色渐变**/
background:-webkit-linear-gradient(top,#03F,#9dccdc);
background: -moz-linear-gradient(top,#03F,#9dccdc);
background:-o-linear-gradient(top,#03F,#9dccdc);
background:linear-gradient(top,#03F,#9dccdc);
} </style>
</head> <body> <div align="center">
<span class="font-label">用户名:</span>
<input type="text" placeholder="请输入用户名" class="input-text"/>
<br/>
<span class="font-label">密 码:</span> <input type="text" placeholder="请输入密码" class="input-text"/>
<br/>
<input type="reset" class="btn-login" value="重置" />
<input type="button" class="btn-login" value="登录" /> </div> </body>
</html>
参考阅读：
http://www.manongjc.com/article/1200.html
http://www.manongjc.com/article/1202.html
CSS3 圆角属性 border-radius和-webkit-border-radius使用的更多相关文章
- border-radius 样式表CSS3圆角属性
border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...
- IE9、 Firefox、Safari, Chrome的CSS3圆角属性
这篇文章主要是记录一下,微软最新发布的 IE9 浏览器CSS 圆角属性,现在CSS3已经 可以轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端 浏览器. ...
- 让IE浏览器支持CSS3圆角属性的方法
绘出圆角: 1.下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar:.htc 文件是IE内核支持Web行为 ...
- [HTML] CSS3 圆角
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". CSS3 border-radius 属性 使用 CSS3 border-radius 属性,你 ...
- css3部分属性兼容性别扭写法（因为很多我就叫他别扭了，希望全面早早支持css3吧）
/*圆角class,需要设置圆角的元素加上class名称*/ .roundedCorners{ -webkit-border-radius: 10px;/*webkit内核浏览器*/ -moz-bor ...
- CSS3：CSS3 圆角
ylbtech-CSS3:CSS3 圆角 1.返回顶部 1. CSS3 圆角 CSS3 圆角 使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". C ...
- 使用 CSS3 的 box-sizing 属性设置元素大小包含 border 与 padding
Ø 默认情况下,内部元素(如:input)的宽度或高度,是不会包含元素的边框和内边距的,这时就需要使用 box-sizing 属性设置该元素. Ø box-sizing 是 CSS3 的属性,可以 ...
- css3中的圆角属性
圆角属性:border-radius <style type="text/css"> .content{ border: 1px solid green; width: ...
- CSS3 border-radius 圆角属性
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. -webkit- 或 -moz- ...
随机推荐
- Gradle 下载不了
可自行下载对应的 gradle-x.x-all.zip 放在下列目录 C:\Users\penno\.gradle\wrapper\dists\gradle-4.4-all\9br9xq1tocpiv ...
- 51Nod 1066：Bash游戏 （巴什博弈）
1066 Bash游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 有一堆石子共有N个.A B两个人轮流拿,A先拿.每次最少拿1颗,最多拿K颗,拿到 ...
- .NET 中小心嵌套等待的 Task，它可能会耗尽你线程池的现有资源，出现类似死锁的情况
一个简单的 Task 不会消耗多少时间,但如果你不合适地将 Task 转为同步等待,那么也可能很快耗尽线程池的所有资源,出现类似死锁的情况. 本文将以一个最简单的例子说明如何出现以及避免这样的问题. ...
- 新建Android一个项目-菜鸟篇
①打开Eclipse,单击菜单栏的“File”->把鼠标光标移动到“New”->在弹出的列表框中,如果直接能看到“Android Applicaion Project”选项项,则直接单击此 ...
- java时间处理--持续时间格式化工具和常量类DurationFormatUtils
阅读目录 DurationFormatUtils类简介 maven地址 构造方法 DurationFormatUtils() formatDurationHMS(long durationMillis ...
- 基于 FastAdmin 开发后台流程 （持续更新）
使用 git init 初始化 增加一个自己的git 原始仓库,用于存放自己的代码. 增加一个 fastadmin 的仓库,为了方便以后与官方同步. 自己修改的代码 git Push 到自己的仓库 将 ...
- es 之 Symbol
ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突.如果有一种机制,保证 ...
- hadoop技术入门学习之发行版选择
经常会看到这样的问题:零基础学习hadoop难不难?有的人回答说:零基础学习hadoop,没有想象的那么难,也没有想象的那么容易.看到这样的答案不免觉得有些尴尬,这个问题算是白问了,因为这个回答似乎什 ...
- IntelliJ IDEA常用设置
IntelliJ IDEA进入设置界面. “File”->“Settings”,进入如下界面: 界面主题设置 CTR+鼠标滚动键改变编辑区字体大小.设置鼠标在系统类上指定时间显示注释. 设 ...
- 【Spring学习笔记-MVC-13】Spring MVC之文件上传
作者:ssslinppp 1. 摘要 Spring MVC为文件上传提供了最直接的支持,这种支持是通过即插即用的MultipartResolve实现的.Spring使用Jakarta Co ...