border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。

　　radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如下图），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。

　　主要在于要理解水平半径和垂直半径：有斜杠，则斜杠前表示水平半径长度，斜杠后表示垂直半径高度；无斜杠，表示水平半径和垂直半径一样。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{

            margin:100px auto;

            width:400px;

           height:200px;

           border-radius:200px/100px;

            background:red;

        }

    </style>

</head>

<body>

<div></div>

</body>

<html>

　　border-radius可以通过值来定义样式相同的角，也对每个角分别定义。下面的表格解释了各个写法所表示的效果。

1、border-radius:10px    将创建四个大小一样的圆角

div{

    margin:100px auto;

    width:200px;

    height:200px;

    border-radius:100px;

    background:red;

}

2、border-radius:10px 15px 10px 5px;    四个值分别表示左上角、右上角、右下角、左下角。

　　四个值分别表示四个角的半径（水平和垂直半径一样）

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{

            margin:100px auto;

            width:200px;

            height:200px;

            border-radius:100px 150px 100px  50px;

            background:red;

        }

    </style>

</head>

<body>

<div></div>

</body>

<html>

3、border-radius:10px 15px;    第一个值表示左上角、右下角；第二个值表示右上角、左下角。

div{

    margin:100px auto;

    width:200px;

    height:200px;

    border-radius:100px 50px;

    background:red;

}

4、border-radius:10px 15px 5px;   第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角。

div{

    margin:100px auto;

    width:200px;

    height:200px;

    border-radius:100px 150px 50px;

    background:red;

}

5、border-radius:20px/10px;  写椭圆角的时候，可以用短写法，创建四个一样的椭圆角。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{

            margin:100px auto;

            width:200px;

            height:200px;

            border-radius:100px/50px;

            background:red;

        }

    </style>

</head>

<body>

<div></div>

</body>

<html>

     红色矩形处就是：水平半径100和垂直半径50

6、border-radius:10px 20px 30px 40px/20px 50px 30px 10px;    斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{

            margin:100px auto;

            width:200px;

            height:200px;

            border-radius:20px 40px 60px 80px/10px 30px 50px 70px;

            background:red;

        }

    </style>

</head>

<body>

<div></div>

</body>

<html>

7、border-radius:10px 20px 40px/20px 50px    斜杠前面和后面每一组分别表示的是四个角水平半径和四个角垂直半径。两个值、三个值的顺序规则你懂的哈，跟上面一样的

div{

    margin:100px auto;

    width:200px;

    height:200px;

    border-radius:10px 20px 40px/20px 50px;

    background:red;

}

　　border-radius可以用来制作很生动的效果。兼容Firefox老的版本，为了兼容Firefox3.6及以下版本，需要写上供应商前缀，为-moz-border-radius:5px，对于每个角的语法，则为：-moz-border-radius-topleft:5px;要特别注意这与标准写法不同。

你以为border-radius只是圆角吗？【各种角度】的更多相关文章

  1. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  2. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  3. Flutter之Decoration（边框、圆角、阴影、形状、渐变、背景图像等）

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  4. 转：Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  5. CSS 笔记——阴影、圆角、旋转、光标

    7. 阴影.圆角.旋转.光标 (1)box-shadow 阴影 基本语法 text-shadow: h-shadow v-shadow blur color; box-shadow: h-shadow ...

  6. CSS3边框与圆角

    1. CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性,这个属性允许你为元素添加圆角边框!语法:border-radius: 1-4 ...

  7. css 边框和圆角

    CSS3圆角 border-radius属性 一个最多指定四个border -*- radius复合属性,这个属性允许你为元素添加圆角边框 语法 border-radius:1-4 length|% ...

  8. winfrom组件圆角

    精简后,就其实一点,只要有paint事件的组件,都可画圆角,没有的外面套一个panel就行了. using System; using System.Collections.Generic; usin ...

  9. 初学c# -- 学习笔记（六） winfrom组件圆角

    刚好用到这个功能,看了好些例子.我就不明白,简单的一个事,一些文章里的代码写的那个长啊,还让人看么. 精简后,就其实一点,只要有paint事件的组件,都可画圆角,没有的外面套一个panel就行了. u ...

  10. Swing圆角边框的实现

    Swing圆角边框的实现方法: package com.justplay.basic; import java.awt.Color; import java.awt.Component; import ...

随机推荐

  1. stl 学习笔记

    1. Erasing multiple objects from a std::vector https://stackoverflow.com/questions/3487717/erasing-m ...

  2. AC日记——The Shortest Path in Nya Graph hdu 4725

    4725 思路: 拆点建图跑最短路: 代码: #include <cstdio> #include <cstring> #include <iostream> #i ...

  3. CSS 规范

    不能写得一手好字是一个遗憾.不能写得一手好看的代码更是一种遗憾.——致青春 1. 为选择器分组时,将单独的选择器单独放在一行. 2. 为了代码的易读性,在每个声明块的左花括号前添加一个空格. 3. 声 ...

  4. 关于render函数的总结

    一般情况下封装一个导航组件的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. es6 Object的几个新方法

    扩展对象 Object.preventExtensions Object.isExtensible 密封对象 Object.seal Object.isSealed 冻结对象 Object.freez ...

  6. [转载]开发 Spring 自定义视图和视图解析器

    原文出处 http://www.ibm.com/developerworks/cn/java/j-lo-springview/ 概述 Spring 3.0 默认包含了多种视图和视图解析器,比如 JSP ...

  7. mysql中timestamp类型的应用

    在开发过程中我们一般需要记住某条记录的创建时间,在MySQL中如果使用dateTime类型的话,无法设定默认值,我们可以采用timestamp类型来记录创建时间.但是随之而来的有个问题,比如说你的这个 ...

  8. 常见OJ提交结果对照表

    Waiting:你的程序刚刚提交,正在等待OJ评测你的程序.   Compiling:OJ正在编译你的程序.   Accepted:OK!你的程序是正确的 ^_^.   Wrong Answer:你的 ...

  9. HDU 6060 RXD and dividing（LCA）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6060 [题目大意] 给一个n个节点的树,要求将2-n号节点分成k部分, 然后将每一部分加上节点1, ...

  10. BZOJ 2157 旅游（树链剖分+线段树）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2157 [题目大意] 支持修改边,链上查询最大值最小值总和,以及链上求相反数 [题解] ...