CSS3笔记：Border-radius的形成原理

最新推荐文章于 2024-08-29 09:00:00 发布

YaoDeBiAn

最新推荐文章于 2024-08-29 09:00:00 发布

阅读量1.8k

点赞数

分类专栏： html css笔记文章标签： css css3 html5

本文链接：https://blog.csdn.net/YaoDeBiAn/article/details/78295725

版权

css笔记同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

html

17 篇文章 0 订阅

订阅专栏

参考文章：http://www.zhangxinxu.com/wordpress/2015/11/css3-border-radius-tips/

一．前言

最近自己写了一个导航栏，马马虎虎就是啧个样纸：

其中的圆角做了好久，就是啧个：

既然用到了，我就在这总结一下圆角border-radius的用法，闲话不多说，进入正题。

二．border-radius的几种常用的写法

border-radius:20px;

或border-radius:20px 20px 20px 20px;

或者border-radius:20px/20px;

或者border-radius:20px 20px/20px 20px;

或者border-radius:20px 20px 20px/20px 20px 20px;

或border-radius:20px 20px 20px 20px/20px 20px 20px 20px;

可以说，最后一种才是完整的写法，前面几种均是它的简写。（当然，其中的值我们也可以用百分比来写）；

那么，我们以最后一种为例，其中各值分别表示啥子呢?

20px 20px 20px 20px/20px 20px 20px 20px其对应的值所作用的相应对象分别为：

(水平半径：左上右上右下左下)/(垂直半径：左上右上右下左下)

我们这里说这是指半径，那这个半径是啥子嘞？理解这个，就很好理解border-radius如何创建圆角。

三．Border-radius如何实现圆角

首先，废话不多说，以实物为例：

<div id="main"></div>

#main{

width:100px;

height:100px;

background:red;

border:50px solid green;

border-radius:70px 0 0 0/70px 0 0 0;

}

我们会想，左上角的圆角是如何形成的，这里就要用到刚刚说的垂直半径与水平半径，怎么说呢，我们用两张图来表示：

而我们的圆角就是上图中的左上圆角，即下图中黄色的部分

现在知道border-radius的圆角是怎么来的了吧。类似的，其他的圆角也是一样的。

但是也有一些特例，比如：

#main{

width:100px;

height:100px;

background:red;

border:50px solid green;

border-radius:0 100px 0 0/0 100px 0 0;

}

<div id="main"></div>

但是，假如我们border-radius设为border-radius:0 300px 0 0/0 300px 0 0;我们会发现结果和上面的一样，这是为哈？

哥们，从上面，我们知道圆角其实就是一个圆(正圆和椭圆)的一个四分之一弧，而我们上面的div块高宽加上边框也才200px的像素，也就是说上面这种情况，咱能承受的最大垂直半径和水平半径分别是也就是200px，按照鑫神(我开头参考的文章作者)的说法，这叫大值特性，也就是我能构建的最大的弧也只能是200px的水平垂直半径的弧，故而，显示的结果和之前是一样的。