一、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. nginx安装后出现502 Bad Gateway 错误解决办法

    1. 打开php-fpm.conf 2.将lisen值修改为 listen = 127.0.0.1:9000 并保存 3.重启服务/etc/init.d/php-fpm restart

  2. Android GridView 第一个Item 点击没反应

    @Override public View getView(final int position, View convertView, ViewGroup parent) { final ViewHo ...

  3. JAVA基础知识之JVM-——类加载器

    类加载器负责将.class文件加载到内存,并为其创建java.lang.Class对象,这个对象就代表这个类. 在Java中,通过包名+类名来唯一标识一个类,而在JVM中,要用 类加载器实例+包名+类 ...

  4. P2680 运输计划

    http://www.luogu.org/problem/show?pid=2680#sub 题目背景 公元 2044 年,人类进入了宇宙纪元. 题目描述 L 国有 n 个星球,还有 n-1 条双向航 ...

  5. LAMMP架构的企业级应用

    LAMMP架构的企业级应用 ========================================= LAMMP是什么 LAMMP的实现 LAMMP适用的生产环境 ============= ...

  6. OS开发(Objective-C)常用库索引

    code4app.com 这网站不错,收集各种 iOS App 开发可以用到的代码示例 cocoacontrols.com/ 英文版本的lib收集 objclibs.com/ 精品lib的收集网站 h ...

  7. Python 2.7.9 Demo - ini文件的读、写

    ini文件 [weixin_info] hello = Nick Huang #coding=utf-8 #!/usr/bin/python import ConfigParser; cp = Con ...

  8. UE4编程之C++创建一个FPS工程（一）创建模式&角色&处理输入

    转自:http://blog.csdn.net/u011707076/article/details/44180951 从今天开始,我们一起来学习一下,如何使用C++将一个不带有任何初学者内容的空模板 ...

  9. <转>32位移植到64位 注意事项

    32bit-64bit porting work注意事项 64位服务器逐步普及,各条产品线对64位升级的需求也不断加大.在本文中,主要讨论向64位平台移植现有32位代码时,应注意的一些细小问题. 什么 ...

  10. css选择器选择顺序是从右往左的，为什么？

    https://segmentfault.com/q/1010000000713509 为什么 CSS 选择器解析的时候是从右往左? CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式. 首先 ...