一、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. 20150625_Andriod_01_ListView1_条目选中

    android listview 参考地址: http://www.cnblogs.com/zhengbeibei/archive/2013/05/14/3078805.html  http://xy ...

  2. Android activity界面跳转动画

    实现activity界面跳转动画 1.在startActivity方法之后加入: overridePendingTransition(R.anim.pull_in_right, R.anim.pull ...

  3. UML类图几种关系的总结（转）

    原文:http://gjhappyyy.iteye.com/blog/1422515 在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization), ...

  4. C#常用日期格式处理转换[C#日期格式转换大全

    DateTime dt = DateTime.Now; Label1.Text = dt.ToString();//2005-11-5 13:21:25 Label2.Text = dt.ToFile ...

  5. eclipse 下调整jdk和tomcat的jvm参数

    eclipse 下调试和运行,往往会出现调整java.lang.OutOfMemoryError: Java heap space  产生的原因我猜测是使用了maven,subversion,myla ...

  6. Android中直播视频技术探究之---桌面屏幕视频数据源采集功能分析

    一.前言 之前介绍了Android直播视频中一种视频源数据采集:摄像头Camera视频数据采集分析 中介绍了利用Camera的回调机制,获取摄像头的每一帧数据,然后进行二次处理进行推流.现在我们在介绍 ...

  7. c++类中的常量

    C++类中的常量 由于#define 定义的宏常量是全局的,不能达到目的,于是想当然地觉得应该用 const 修饰数据成员来实现.const 数据成员的确是存在的,但其含义却不是我们所期望的.cons ...

  8. FlashFXP命令行

    flashfxp.exe -upload ftp://user:pass@ip:port -localpath="本地路径"  -remotepath="远程FTP上的路 ...

  9. BZOJ 3144 切糕（最小割）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=3144 题意: 思路:我们假设没有那个D的限制.这样就简 单了.贪心的话,我们只要在每一个 ...

  10. TCP/IP协议简介

    计算机网络是什么? 简单地理解,计算机网络的任务就是传输数据.为了完成这一复杂的任务,国际标准化组织ISO提供了OSI参考模型,这种模型把互联网网络氛围7层,分别是物理层.数据链路层.网络层.传输层. ...