一、border-radius是向元素添加圆角边框：

　　border-radius的值不仅能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。（都不能是负值）

　　

　　1、border-radius

　　　　　　设置或检索对象使用圆角边框。

　　　　　　如果提供四个参数值，将按上左、上右、下右、下左的顺序作用于四个角。

　　　　　　如果提供一个，将用于全部的于四个角。
　　　　　　如果提供两个，第一个用于上左、下右，第二个用于上右、下左。
　　　　　　如果提供三个，第一个用于上左，第二个用于上右、下左，第三个用于下右。
　　　　　　垂直半径也遵循以上4点。
　　　　　　对应的脚本特性为borderRadius。
　　2、border-top-left-radius
　　　　　　设置或检索对象的左上角圆角边框。

　　　　　　如设置border-top-left-radius:5px 10px;
　　　　　　表示top-left这个角的水平圆角半径为5px，垂直圆角半径为10px。
　　　　　　对应的脚本特性为borderTopLeftRadius。  
　　3、border-top-right-radius
　　　　　　设置或检索对象的右上角圆角边框。

　　　　　　如设置border-top-right-radius:5px 10px;
　　　　　　表示top-right这个角的水平圆角半径为5px，垂直圆角半径为10px。
　　　　　　对应的脚本特性为borderTopRightRadius。
　　4、border-bottom-right-radius　　

　　　　　  设置或检索对象的左下角圆角边框

　　　　　　如设置border-bottom-right-radius:5px 10px;
　　　　　　表示bottom-right这个角的水平圆角半径为5px，垂直圆角半径为10px。
　　　　　　对应的脚本特性为borderBottomRightRadius
　　5、border-bottom-left-radius
　　　　　　设置或检索对象的左下角圆角边框。

　　　　　　如设置border-bottom-left-radius:5px 10px;
　　　　　　表示bottom-left这个角的水平圆角半径为5px，垂直圆角半径为10px。
　　　　　　对应的脚本特性为borderBottomLeftRadius。

二、使用方法　

　　 设定一个值会同时设定四个角的圆角都一样（四个半径值分别是左上角、右上角、右下角和左下角，顺时针）
　　 如果圆角的半径相同，每个值可以只写一个参数,相当于写2个一样的参数 例如 30px/30px 和30px 是等同的
<style>

    .box1{ padding:10px;width:180px;height:80px;border:2px solid red;border-radius:20px;}

    .box2{ padding:10px;width:180px;height:80px;border:2px solid red;border-radius:10px 20px 30px 40px;}

</style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

</body>
<style>

    div{width:180px;height:80px;border:2px solid red;padding:10px;border-radius:20px/20px 40px 80px;}

    /*20px代表左上角,40px代表右上角和左下角,80px代表右下角*/

</style>

</head>

<body>

    <div></div>

</body>
<style>

    div{ padding:10px; width:180px;height:80px;border:2px solid red; border-radius:20px 40px 80px 100px/20px 40px 80px 100px;}

    /*20px 代表左上角的垂直半径,40px 代表右上角的垂直半径,80px 代表右下角的垂直半径,100px 代表左下角的垂直半径*/

</style>

</head>

<body>

    <div></div>

</body>

CSS3_边框属性之圆角的更多相关文章

  1. CSS3_边框属性之圆角的基本图形案例

    一.正方形 div{ background:#F00; width:100px; height:100px;}   二.长方形 div{background:#F00;width:200px;heig ...

  2. css3设置边框属性

    css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  3. WPF将TextBox的边框设为圆角的

    将TextBox的边框设为圆角的,因为TextBox默认的样式中边框就是由Border类型来实现的, 所以只需要真的当前的TextBox的Border修改属性即可,为了不影响界面中别的Border的样 ...

  4. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  5. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 圆角

    传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...

  7. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  8. CSS的背景属性和边框属性

    CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...

  9. border边框属性

    边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...

随机推荐

  1. 山东理工大学第七届ACM校赛-飞花的线代 分类： 比赛 2015-06-26 10:29 10人阅读 评论(0) 收藏

    飞花的线代 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 飞花壕的线代一直非常的壕(好),线代考试每次都是全班第一.一次,飞花壕在预习 ...

  2. Elevator 分类： HDU 2015-06-19 21:52 13人阅读 评论(0) 收藏

    Elevator Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  3. python终端颜色设置

    1.颜色定义说明 格式:\033[显示方式;前景色;背景色m   前景色 背景色 颜色 --------------------------------------- 30 40  黑色 31 41 ...

  4. Poj(1459)，最大流，EK算法

    题目链接:http://poj.org/problem?id=1459 Power Network Time Limit: 2000MS   Memory Limit: 32768K Total Su ...

  5. winform中利用反射实现泛型数据访问对象基类(2)

    在1的基础上做了一点改进 参数化处理 看上去更简洁 无主键情况下 update 方法需要改进 insert delete没有问题  /// <summary>     /// DAO基类 ...

  6. UML中的用例(Use Case)概念分析及StarUML实例

    在UML中use case似 乎最簡單的,用例建模的最主要功能就是用来表达系统的功能性需求或行为,依我的理解用例建模可分为用例图和用例描述.用例图由参与者(Actor).用例 (Use Case).系 ...

  7. 一致性hash算法——之二

    摘自:http://www.tomkleinpeter.com/2008/03/17/programmers-toolbox-part-3-consistent-hashing/

  8. 2.建立exception包，建立Bank类，类中有变量double balance表示存款,Bank类的构造方法能增加存款，Bank类中有取款的发方法withDrawal(double dAmount),当取款的数额大于存款时,抛出InsufficientFundsException,取款数额为负数，抛出NagativeFundsException,

    public class Bank { Double qian=0.0; double newBank(double a) { qian=qian+a; return qian; } double w ...

  9. __declspec(dllexport) & __declspec(dllimport)

    __declspec(dllexport) 声明一个导出函数,是说这个函数要从本DLL导出.我要给别人用.一般用于dll中 省掉在DEF文件中手工定义导出哪些函数的一个方法.当然,如果你的DLL里全是 ...

  10. mysqldump使用方法(MySQL数据库的备份与恢复)

    #mysqldump --help 1.mysqldump的几种常用方法: (1)导出整个数据库(包括数据库中的数据) mysqldump -u username -p dbname > dbn ...