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. 聊聊五大IO模型

    IO模型介绍 IO模型不是用来开启并发效果的,而是用来接收并发效果的. 比较了五种IO Model:    * blocking IO           阻塞IO    * nonblocking ...

  2. hdu 3488(KM算法||最小费用最大流)

    Tour Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submis ...

  3. 微信小程序-如何自定义导航栏（navigationStyle）？

    小程序是越来越开放了,微信版本 6.6.0可以自定义导航? 先了解下app.json中window配置navigationStyle属性,即导航栏样式,仅支持 default/custom.custo ...

  4. slice切割数组arr=[[0,1],[2,3]]

    for (var i = 0; i < 10; i++) { arr.push(i) } function arrSlice(arr, num) { var arr1 = []; for (va ...

  5. jquery请求解析xml

    我们使用jque.ajax来做这个实验.其核心实现原理就是将请求回来的xml数据用$()选择器封装,然后进行傻瓜式操作. 代码如下: 需要注意的是请求数据格式要声明成:xml.不然不生效. $.aja ...

  6. CentOS7下python工作环境管理

    一.pyenv管理不同的python版本1.下载安装git clone git://github.com/yyuu/pyenv.git ~/.pyenv  echo 'export PYENV_ROO ...

  7. LoadRunner11破解方法

    前期准备:LoadRunner11 下载LoadRunner破解文件 下载LoadRunner注册表清理工具 下载 LoadRunner11破解方法:一.覆盖破解文件首先请下载LoadRunner破解 ...

  8. CentOS 6.7下配置 yum 安装 Nginx

    CentOS 6.7下配置 yum 安装 Nginx. 转载:http://www.linuxidc.com/Linux/2016-07/133283.htm 第一步,在/etc/yum.repos. ...

  9. 再聊语言,模式,OOD

    今天与人再次聊到这个话题,有人在为"到底该用什么模式"而烦恼,我相信,每个都经历过这个阶段一定都会感觉很熟悉这个烦恼我认为, 模式不是目的,只是工具,达到设计目标的工具,我们不会因 ...

  10. CodeForces 723F st-Spanning Tree

    $dfs$,构造. 类似于$k$度限制生成树的想法,可以将$s$和$t$先从图中删去,将剩下的部分求连通块,每个连通块内部很容易构造生成树,每个连通块缩成一个点来处理. 连通块分三种: $1$.只与$ ...