传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4
一、border-radius属性
CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、px、百分比等等。
比如,下面是一个div方框(宽高都是200,背景为红色,边框为2px solid #000)

现在设置它的圆角半径为50px,即:

border-radius:50px;
这条语句同时将每个圆角的"水平半径"和"垂直半径"都设置为50px。

border-radius可以同时设置1到4个值。(想想我们之前的margin与padding)如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

例:

border-radius:50px 25px; //表示左上角和右下角使用第一个值,右上角和左下角使用第二个值
border-radius:25px 10px 50px; //左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值
border-radius:25px 10px 50px 0;//左上角、右上角、右下角、左下角(顺时针顺序)
border-radius还可以用斜杠设置第二组值。这时,第一组值表示水平半径,第二组值表示垂直半径。第二组值也可以同时设置1到4个值,应用规则与第一组值相同。
border-radius:50px/25px;

border-radius: 100px 25px 80px 5px / 45px 25px 30px 15px;
二、单个圆角的设置
除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:
  * border-top-left-radius
  * border-top-right-radius
  * border-bottom-right-radius
  * border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值,表示水平半径与垂直半径相等。如果设置2个值,第一个值表示水平半径,第二个值表示垂直半径。
border-top-left-radius: 50px;
border-top-left-radius: 50px 100px;//第一个值表示水平半径,第二个值表示垂直半径。

三、效果

实现代码:

width:0;
height:0;
border:100px solid gray;
border-radius:100px;
border-right-color:#fff;

实现代码

height:100px;
width:200px;
background: red;
border-radius:100px/50px;

css3(border-radius)边框圆角详解的更多相关文章

  1. css3(border-radius)边框圆角详解(转)

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

  2. CSS3: border-radius边框圆角详解

    border-radius 基本语法: border-radius : none | <length>{1,4} [/ <length>{1,4} ]? 取值范围: <l ...

  3. 转:CSS圆角详解

    CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...

  4. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  5. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  6. css3中user-select的用法详解

    css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...

  7. css3 border img 边框图片

    摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘 ...

  8. CSS3教程:pointer-events属性值详解 阻止穿透点击

    转:http://www.poluoluo.com/jzxy/201109/142876.html 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样 ...

  9. css3伸缩布局中justify-content详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. jface databinding:部分实现POJO对象的监测

    在前一篇博文<jface databinding/PojoBindable实现对POJO对象的支持  >中,已经知道直接对POJO对象进行修改,是不能被绑定的UI组件知道的,在上一篇文章中 ...

  2. Oracle 取随机数

    1.从表中随机取记录 select * from (select * from staff order by dbms_random.random)      where rownum < 4 ...

  3. Leetcode Divide Two Integers

    Divide two integers without using multiplication, division and mod operator. 不用乘.除.求余操作,返回两整数相除的结果,结 ...

  4. Android -- ImageView(控制图片的大小以及旋转的角度)

    1. 

  5. 团队作业week9 scenario testing

    1.How do you expect different personas to use your software? What’s their need and their goals,  how ...

  6. python学习 第一天

    正式学习python第一天,网上找到了python教程,带练习题的,又装了ubuntu. 这是学习笔记: list[]: 可变,append/1,insert/2,pop/index? tuple() ...

  7. 关于type erasure

    哇,好久没有写blog了,再不写的话,blog的秘密都要忘记了,嘿嘿. 最近在试着参与一个开源项目,名字叫avim(A Vibrate IM),别想多了哟.地址是:https://github.com ...

  8. Thinking in Java——笔记(11)

    Holding Your Objects In general, your programs will always be creating new objects based on some cri ...

  9. Linux下解压命令大全 解压缩 tar bz2 zip tar.gz gz

    .tar解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)---------------.gz解压1:gunz ...

  10. [bzoj2463]谁能赢呢

    我们通过观察可以发现,当n为偶数时,一定可以转化为一种先手必胜态,即棋盘可以被骨牌所覆盖, 如果n是奇数,那么去掉一格后一定能被1*2的骨牌覆盖,但是先手从左上角走,就进入了这个S态(必胜态),那么和 ...