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. 【hdoj_1398】SquareCoins(母函数)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1398 此题采用母函数的知识求解,套用母函数模板即可: http://blog.csdn.net/ten_s ...

  2. react生命周期函数使用箭头函数，导致mobx-react问题

    最近新人加入了项目,遇到了一个很奇怪的问题.mobx observable 属性,onChange的时候就是页面不会刷新. 试来试去,就是不知道什么原因,后来其他同事查到是因为componentWil ...

  3. 五十五 网络编程 UDP编程

    TCP是建立可靠连接,并且通信双方都可以以流的形式发送数据.相对TCP,UDP则是面向无连接的协议. 使用UDP协议时,不需要建立连接,只需要知道对方的IP地址和端口号,就可以直接发数据包.但是,能不 ...

  4. Ubuntu 虚拟机增强包下载

    https://www.virtualbox.org/wiki/Download_Old_Builds_5_1 Extension Pack All Platforms 安装方法详情:https:// ...

  5. .Net WebAPI 增加Swagger

    第一部分:创建项目 选择Web/ASP.NET Web Application 这里我选择的是WebAPI,并且增加MVC和Web API,权限部分选择无权限 第二部分:增加EF连接 因为项目需要连接 ...

  6. JQuery动态添加多个tab页标签

    jQuery是一个兼容多浏览器的js库,核心理念是write less,do more(写的更少,做的更多),jQuery使用户能更方便地处理HTML documents.events.实现动画效果, ...

  7. centos xampp 隐藏phpmyadmin地址

    /opt/lampp/etc/extra/httpd-xampp.conf Alias /phpmyadmin "/opt/xampp/phpMyAdmin/" 改为 Alias ...

  8. gcc、make、makefile、cmake、cmakelists区别

      文章来源:见下!   作者:辉常哥链接:https://www.zhihu.com/question/36609459/answer/89743845来源:知乎著作权归作者所有.商业转载请联系作者 ...

  9. HDU 6070 Dirt Ratio（线段树）

    Dirt Ratio Time Limit: 18000/9000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others)Tot ...

  10. HDU5742 It's All In The Mind 数学思维题

    Problem Description Professor Zhang has a number sequence a1,a2,...,an. However, the sequence is not ...