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. Centos6.9下安装OpenOffice 4.1.4

    # 对一下时间,时间不准,解压不了yum install -y ntp unzipntpdate -u 202.112.10.36yum install libXext.x86_64 -yyum gr ...

  2. SonarQube Scanner for MSBuild

    到现在为止,已经将sonarQube服务器搭建好,服务器是Linux服务器,基于sonarQube6.1配置的 原理关于sonarQube的工作原理,暂时还不是太清楚,据同事的分析,是在本机调用服务器 ...

  3. Ubuntu 18.04安装 Sublime

    作为一款强大的源代码编辑器,当然需要一手流利的命令来安装它. 命令: wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | s ...

  4. RadioGroup多行显示

    今天做一个单选框,效果如下: 使用原始的RadioGroup可以实现布局,但因为把6个单选分为两个LinearLayout,导致无法互斥,Google官方的做法是写两个RadioGroup,但是要动态 ...

  5. JavaScript的基础学习(一)

    一.JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase ...

  6. Ghostscript 中 ps2pdf 命令在 windows msys 下的运行错误问题。

    前两天看到了 miloyip/game-programmer 这个项目觉得特别有用,真是好东西,明确了指出了学习路线,尤其是新手.不过打开看,有些书对应的亚马逊链接是无效的,比如<Tricks ...

  7. 杀掉lampp进程

    #!/bin/sh pid='ps -ef|grep lampp|grep -v grep|awk '{ print $2 }'' echo $pid exit if[ $pid ] then for ...

  8. 旺财C# .NET代码生成器之DTcms4/5代码批量生成功能

    经近半年的实战积累.于2017年6月底,增加对第三方开源软件DTcms(4和5都支持)的代码生成支持. 可以一键生成的DTcms4/5代码如下:1.Model经典三层实体2.DAL经典三层数据库访问层 ...

  9. [BZOJ4698][SDOI2008]Sandy的卡片(后缀自动机)

    差分之后就是求多串LCS. 对其中一个串建SAM,然后把其它串放在上面跑. 对SAM上的每个状态都用f[x]记录这个状态与当前串的最长匹配长度,res[x]是对每次的f[x]取最小值.答案就是res[ ...

  10. CodeForces - 875D High Cry

    题面在这里! 直接考虑每个位置成为最右边的最大值的位置,统计不合法区间,补集转化一下就好啦. 复杂度O(N * 30) #include<bits/stdc++.h> #define ll ...