1、border-radius可以包含两个参数值,第一个水平圆角半径,第二个为垂直半径,并且两个参数值用“/”分开。

2、border-radius:设置一个值为四个角都相同,两个值为左上和右下相同,右上左下相同。三个值分别为左上,右上与左下相同,右下。四个值为顺时针:左上,右上,右下,左下。

3、如果要将四个角的半径水平垂直都不同的话,这样设置:border-radius:60px 40px 30px 20px / 30px 20px 10px 5px;//"/" 前面的为水平半径,“/”后面的为垂直半径。

4、分开设置各个顶点的圆角的水平和垂直半径时不需要“/”,例如:

  border-top-left-radius:10px 50px;

  border-bottom-left-radius:10px 50px;

  border-top-left-radius:10px / 50px; //这样写是错的

5、圆角边框的特殊应用:

  1>border-radius还有一个内半径和外半径的区别,当元素边框值比较大时,效果比较明显。当boder-radius的半径小于或等于border的厚度时,元素边框内部就不具有圆角效果,因为border-radius内边半径=外边半径-对应的边框宽度。

  

  2>元素相邻边有不同的宽度,这个角也会从宽的边平滑过渡到窄的边,其中一条边甚至可以为0

6、表格应用圆角:只有border-collapse属性为separate时,表格圆角才能正常显示

        table{
margin: 30px;
padding: 10px;
border: 5px solid black;
border-radius: 10px;
}
.table1{
border-collapse:collapse;
}
.table2{
border-collapse:separate;
}
<table class="table1">
<tr>
<td>border-collapse:collapse</td>
</tr>
</table>
<table class="table2">
<tr>
<td>border-collapse:separate</td>
</tr>
</table>

7、border-radius属性浏览器兼容问题:

  IE8及以下浏览器不支持border-radius属性有些老一点的浏览器需要添加私有前缀。

  处理兼容性问题:

    1>使用第三方插件,例如IE-css3.js,PIE,或者其他javascript脚本插件

    2>在不支持border-radius属性的浏览器采用另一套样式。也就是实现css2中的图片实现圆角方法的优雅降级,在不支持border-radius的浏览器显示直角。

css3的border-radius属性使用方法的更多相关文章

  1. 让IE浏览器支持CSS3圆角属性的方法

    绘出圆角: 1.下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar:.htc 文件是IE内核支持Web行为 ...

  2. java定义一个Circle类,包含一个double型的radius属性代表圆的半径,一个findArea()方法返回圆的面积

    需求如下:(1)定义一个Circle类,包含一个double型的radius属性代表圆的半径,一个findArea()方法返回圆的面积. (2)定义一个类PassObject,在类中定义一个方法pri ...

  3. CSS3的新增边框属性

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

  4. 【Visual Lisp】Visual Lisp属性与方法

    说明:Visual Lisp属性的获取.赋值和方法的执行有多种形式.然而对于初学者来说一次性就要全部掌握显然是没有必要的,有时候每种方法都是通用的功能都一样我们就没有必要把所有方法都记住.我们只需要掌 ...

  5. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  6. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  7. HTML5 canvas文本属性与方法

    文本属性和方法 font                        设置或返回文本内容的当前字体属性 textAlign                设置或返回文本内容的当前对齐方式 start ...

  8. HTML5 Canvas 中的颜色、样式和阴影的属性和方法

    颜色.样式和阴影的属性与方法 fillStyle                设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle         设置或返回用于笔触的颜色.渐变或模式 ...

  9. Android绘图机制(一)——自定义View的基础属性和方法

    Android绘图机制(一)--自定义View的基础属性和方法 自定义View看起来,确实看起来高深莫测,很多Android开发都不是特别在行这一块,这里面的逻辑以及一些绘画都是有一点难的,说一下我目 ...

  10. vue绑定html的class属性的方法

    一.对象语法绑定class属性 class的属性代码如下 <style type="text/css"> .red{ color: red; width: 100px; ...

随机推荐

  1. ebullient(2018.10.25)

    结论巨好想,每一次操作可以看作把一个b往前移一位,另一个b往后移一位,逆序对个数不改变,判断即可做第一问. 此处代码仅给出第一问做法: #include<cstdio> #include& ...

  2. Access restriction: The type 'JPEGCodec' is not API

    问题 今天导入项目时Eclipse报错如下: Access restriction: The type 'JPEGCodec' is not API (restriction on required ...

  3. hashCode方法里为什么选择数字31作为生成hashCode值的乘数

    前提: 偶然的机会看到了大神的一篇博客,介绍的是hashCode()方法里为什么要用31这个数字作为生成hashCode的乘数.hashCode我在比较自定义类时曾经用到过 - 由于java默认比较的 ...

  4. Codeforces Round #402 (Div. 2) A

    Description In Berland each high school student is characterized by academic performance — integer v ...

  5. PlSqlDev中执行INSERT SQL语句包含&符号导致数据异常

    在PLSQL Developer中执行Insert语句时提示如下信息: 当时未注意,直接点击OK按钮继续. 导入数据后查看发现部分数据中的参数丢失了一部分,呈以下规律: . 而正常应为: . 经询问大 ...

  6. 用javascript编写一个简单的随机验证码程序

    简单模拟网页的随机数字验证码,效果图如下: html代码: <div id="content"> <div class="left"> ...

  7. Windows下打开某些软件时显示显卡驱动不是最新的问题

    在Windows下打开某些对显卡要求比较高的软件时,会出现某些显卡驱动不是最新,要求更新到最新的提示,但是当你真的去更新显卡驱动的时候,却发现现在的显卡驱动已经是最新了,那么为什么还会有这样的提示呢, ...

  8. APICloud手机APP开发

    官网 http://docs.apicloud.com/

  9. webpack(1)

    在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg ...

  10. uvm_object ——太极

    无极生太极——无名天地之始 太极生两仪——有名万物之母   文件: $UVM_HOME/src/base/uvm_object.svh 类: uvm_object The uvm_object cla ...