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. LeetCode解题报告—— Word Search & Subsets II & Decode Ways

    1. Word Search Given a 2D board and a word, find if the word exists in the grid. The word can be con ...

  2. initerrlog: 无法打开错误日志文件 'D:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\Log 解决办法

    initerrlog: 无法打开错误日志文件 'D:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\Log 1. 设置 ...

  3. AC日记——旅游 bzoj 2157

    2157 思路: LCT: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 400005 #define IN ...

  4. 5.Spark Streaming流计算框架的运行流程源码分析2

    1 spark streaming 程序代码实例 代码如下: object OnlineTheTop3ItemForEachCategory2DB { def main(args: Array[Str ...

  5. 35.Spark系统运行内幕机制循环流程

    一:TaskScheduler原理解密 1,  DAGScheduler在提交TaskSet给底层调度器的时候是面向接口TaskScheduler的,这符合面向对象中依赖抽象而不依赖的原则,带来底层资 ...

  6. Laravel 下配置 Redis 让缓存、Session 各自使用不同的 Redis 数据库

    为什么要这样做? 默认情况下,Redis 服务会提供 16 个数据库,Laravel 使用数据库 0 (请见 Redis 文档)作为缓存和 Session 的存储. 在使用的过程中觉得这个默认的设置挺 ...

  7. 【ASP.NET MVC】HTML5+MVC上传文件显示进度

    head> <title>Index</title> <style type="text/css"> #statusBorder { po ...

  8. python之sqlite3使用详解

    Python SQLITE数据库是一款非常小巧的嵌入式开源数据库软件,也就是说没有独立的维护进程,所有的维护都来自于程序本身.它使用一个文件存储整个数据库,操 作十分方便.它的最大优点是使用方便,功能 ...

  9. NOIP 2006 提高组 t1 能量项链

    题目描述 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子,前一颗珠子的尾标记一定 ...

  10. JZYZOJ1383 [usaco2003feb]impster 位运算 最短路

    http://172.20.6.3/Problem_Show.asp?id=1383  找能到达某个状态的最小操作数,然后把所有状态扫一遍即可,要额外判定一下起始就有的状态(如果起始里没有0那么这些状 ...