CSS3 圆角(border-radius)详解
在做网页的时候,常常需要实现圆角,以前的做法就是切图,现在好了,有了css3的 border-radius 特性之后,实现边框圆角效果就非常简单了,而且其还有多个优点:一是减少网站维护工作量;二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载入速度将变快;三是增加视觉美观性。
border-radius 是一种缩写方法。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:
- 1、只有一个值,那么 top-left、top-right、bottom-right、bottom-left 四个值相等。
- 2、有两个值,那么 top-left 等于 bottom-right,并且取第一个值;top-right 等于 bottom-left,并且取第二个值
- 3、有三个值,其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。
- 4、有四个值,其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。
其实 border-radius 和 border 属性一样,还可以把各个角单独拆分出来,也就是以下四种写法,这里我规纳一点,他们都是先Y轴在X轴,具体看下面:
border-top-left-radius: <length> <length> //左上角
border-top-right-radius: <length> <length> //右上角
border-bottom-right-radius:<length> <length> //右下角
border-bottom-left-radius:<length> <length> //左下角
border-radius 只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式,对于老版的浏览器,border-radius 需要根据不同的浏览器内核添加不同的前缀,比说 Mozilla 内核需要加上“-moz”,而 Webkit 内核需要加上“-webkit”等,那么我为了能兼容各大内核的老版浏览器,我们看看 border-radius 在不同内核浏览器下的书写格式:
1、Mozilla(Firefox, Flock等浏览器)
-moz-border-radius-topleft: //左上角
-moz-border-radius-topright: //右上角
-moz-border-radius-bottomright: //右下角
-moz-border-radius-bottomleft: //左下角
等价于:-moz-border-radius: //简写
2、WebKit (Safari, Chrome等浏览器)
-webkit-border-top-left-radius: //左上角
-webkit-border-top-right-radius: //右上角
-webkit-border-bottom-right-radius: //右下角
-webkit-border-bottom-left-radius: // 左下角
等价于:-webkit-border-radius: //简写
3、Opera浏览器
border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角
等价于:border-radius: //简写
4、Trident (IE)
IE9 以下版本不支持 border-radius,而且 IE9 没有私有格式,都是用 border-radius,其写法和 Opera 是一样的,这里就不在重复。
为了不管是新版还是老版的各种内核浏览器都能支持 border-radius 属性,那么我们在具体应用中时需要把我们的 border-radius 格式改成:
-moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
-webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
其拆分开来的格式相应需要加上 -moz 和 -webkit,上面的代码其实就等价于下面的代码:
-moz-border-radius-topleft: <length> <length> //左上角
-moz-border-radius-topright: <length> <length> //右上角
-moz-border-radius-bottomright: <length> <length> //右下角
-moz-border-radius-bottomleft: <length> <length> //左下角
-webkit-border-top-left-radius: <length> <length> //左上角
-webkit-border-top-right-radius: <length> <length> //右上角
-webkit-border-bottom-right-radius: <length> <length> //右下角
-webkit-border-bottom-left-radius: <length> <length> // 左下角
border-top-left-radius: <length> <length> //左上角
border-top-right-radius: <length> <length> //右上角
border-bottom-right-radius: <length> <length> //右下角
border-bottom-left-radius: <length> <length> //左下角
一般需求就如下:
.demo {
width: 150px;
height: 80px;
border: 2px solid #f36;
background: #ccc;
}
但是有时候也需要拆分开来,如下:
.demo {
border-top-left-radius: 10px 20px;
border-top-right-radius: 15px 30px;
border-bottom-right-radius: 20px 10px;
border-bottom-left-radius: 30px 15px;
}
效果如下:
支持的浏览器
如果想查看更详细的,链接地址:http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-border-radius.html
CSS3 圆角(border-radius)详解的更多相关文章
- 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)
[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...
- CSS3的@keyframes用法详解:
CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...
- css3系列之transform详解translate
translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() ...
- CSS3 基础(1)——选择器详解
CSS3选择器详解 一. 属性选择器 在CSS3中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. 选择器 示例 描述 ...
- 第97天:CSS3渐变和过渡详解
一.渐变 渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性. 可分为线性渐变.径向渐变 1. 线性渐变 (grad ...
- 第98天:CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
- Android shape 渐变!描边!圆角!示例详解
看看shape的用法,确实很有帮助.这里我偷懒转一篇比较详细的帖子,和大家一起进步~! Android 中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体 ...
- 【CSS3】CSS3:border-image的详解和实例
border-image简介 border-image是CSS3中的新特性.目前几乎所有的主流浏览器都已经支持该特性,详情请移步border-image的兼容性. border-image属性及使用说 ...
- CSS3中border-image属性详解
border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...
- 两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
随机推荐
- java int转byte和long转byte
在网络编程中,出于节约带宽或者编码的需要,通常需要以原生方式处理long和int,而不是转换为string. public class ByteOrderUtils { public static b ...
- 最小化安装centos7下配置网络
虚拟机操作系统:centos7.0 命令行模式 1.首先明确centos7在最小化安装完是不支持上网的,相应的查看网络以及修改网络参数是不能使用的,最常见的就是我们常用的ifconfig. 2.找到网 ...
- linux线程控制&线程分离
线程概念 线程,有时被称为轻量级进程(Lightweight Process,LWP),是程序执行流的最小单元. 线程是程序中一个单一的顺序控制流程.进程内一个相对独立的.可调度的执行单元,是系统独立 ...
- 关于C#中泛型类型参数约束(where T : class)
.NET支持的类型参数约束有以下五种:where T : struct | T必须是一个结构类型where T : class ...
- RGui的http代理设置
办公电脑环境需要http代理访问大网,使用R语言安装包时老是无法连接网络,后来从网上发现解决方法很简单,只需在启动RGui.exe的命令行上加上启动参数就可以了. "C:\Program F ...
- win-tc图形库编程
本文地址:http://www.cnblogs.com/archimedes/p/win-tc-graphics-use.html,转载请注明源地址. 由于最近接到一个紧急任务,需要实现一个程序,显示 ...
- 【读书笔记】iOS-特性
一,@符号标志着“你将使用Objective-C的特殊用法”.@property是一种新的编译器功能,表示声明了一个新对象属性. 二,@property预编译指令的作用是自动声明属性的setter和g ...
- spring和mybatis整合配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- BeanFactory not initialized or already closed - call 'refresh' before accessing beans解决办法
今天在写Spring程序时遇到了一个很常见的错误,而我以前好像一直没碰到过,今天才见到这个错误,经过研究解决了这个错误,犯这个错误真是不应该啊. log4j:WARN No appenders cou ...
- Java从零开始学四十二(DOM解析XML)
一.DOM解析XML xml文件 favorite.xml <?xml version="1.0" encoding="UTF-8" standalone ...