一、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. MVC模式：实现数据库中数据的增删改查功能

    *.数据库连接池c3p0,连接mysql数据库: *.Jquery使用,删除时跳出框,确定是否要删除: *.使用EL和JSTL,简化在jsp页面中插入的java语言 1.连接数据库 (1)导入连接数据 ...

  2. Gift Hunting(分组背包)

    Gift Hunting Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  3. 查找练习 hash——出现过的数字 分类： 查找 2015-06-18 17:30 7人阅读 评论(0) 收藏

    查找练习 hash--出现过的数字 *Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 有一个数据字典,里面存有n个数字(n<=10 ...

  4. JAVA基础知识之IO——Java IO体系及常用类

    Java IO体系 个人觉得可以用"字节流操作类和字符流操作类组成了Java IO体系"来高度概括Java IO体系. 借用几张网络图片来说明(图片来自 http://blog.c ...

  5. linux内核中创建线程方法

    1.头文件 #include <linux/sched.h> //wake_up_process() #include <linux/kthread.h> //kthread_ ...

  6. 链表——PowerShell版

    链表是由一系列节点串连起来组成的,每一个节点包括数值部分和指针部分,上一节点的指针部分指向下一节点的数值部分所在的位置. 在C语言中我们有两种方式来定义链表—— 1.定义结构体:来表示链表中的节点,节 ...

  7. js的 image 属性 和一个预加载模块

    创建一个Image对象:var a=new Image();    定义Image对象的src: a.src=”xxx.gif”;    这样做就相当于给浏览器缓存了一张图片. 图像对象: 建立图像对 ...

  8. 2016年12月15日 星期四 --出埃及记 Exodus 21:10

    2016年12月15日 星期四 --出埃及记 Exodus 21:10 If he marries another woman, he must not deprive the first one o ...

  9. FlexCell控件的使用

    private void grid1_GetCellText(object Sender, FlexCell.Grid.GetCellTextEventArgs e) { // 要使用虚表,可以在Gr ...

  10. MSM8909+Android5.1.1之系统烧录

    1.     安装高通USB驱动 图1 安装成功后,同时按下设备的音量+和音量-按键,且用USB连接到设备上,在设"设备管理器--->端口"下面看到USB虚拟的端口,如下: ...