我们应该熟知 CSS 的 各个浏览器的前缀：

由于CSS3很多属性尚未成为W3C标准的一部分，因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性。我们在书写CSS3代码时，需要在属性前加上浏览器的私有前缀，然后该种内核的浏览器才能识别相应的CSS3属性。

Css3 边框详讲_html

 

边框

Css3 边框详讲_css3_02

 

 

 

CSS3边框圆角的实现： border-radius

语法：border-radius: none　｜　length{1,4} [/length{1,4}其中每一个值可以为数值或百分比的形式。 

length/length　第一个lenght表示水平方向的半径，而第二个表示竖直方向的半径。 

 

设置四个角的话直接一个值。

但是角的顺序是这样的：

Css3 边框详讲_html_03

 

 

Css3 边框详讲_圆角_04

 

当给的值不一样的时候，设置的角也是不一样，即：

 1个参数：border-radius:10px;　　　　　　　　　　　　　　 /* 表示4个角的值是一样的。 */

 2个参数：border-radius:10px 20px; 　　　　　　　　　　　　/* 上左、下右的半径值是10px ;上右、下左的半径值是20px */Css3 边框详讲_css3_05

 

 

 3个参数：border-radius:10px 20px 30px; 　　　　　　　　　　/* 上左10px;上右、下左20px; 下右30px*/Css3 边框详讲_圆角_06

 

 

 4个参数：border-radius:10px 20px 30px 40px; /* 　　　　　　对应的是上左(top-left)→上右(top-right)→下右 (bottom-right)→下左(bottom-left) 四个角的半径值 */Css3 边框详讲_css3_07

 

 

 

 

但是 如果你想设置有些形状，那么其实他是和  长度和宽度有关的：

案例：　　实心半圆

Css3 边框详讲_圆角_08

我们只要掌握制作一 个方向的实心半圆的方法，其他方向的实心半 圆就可以轻松实现，因为原理都一样。

假如我们要制作实现上半圆，实现方法：把高 度(height)设为宽度（width）的一半，并且只 设置左上角和右上角的圆角半径与元素的高度 一致，而右下角和左下角的圆角半径设置为0。

Css3 边框详讲_html_09Css3 边框详讲_css3_10

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius属性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid red;
border-radius:100px 100px 0 0;
background-color:#FCE9B8;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

View Code

 Css3 边框详讲_css3_11

 

 

 

 

如果平方向和竖直方向半径不相同的 处理：

水平与垂直半径不同时：  border-radius用斜杠设置第二组值。

这时，第一组值表示水平半径，

第二组值表示垂直半径，

应用规则与第一组值相同。

即：

1个参数：border-radius:10px/5px;Css3 边框详讲_css3_12

 

 

 

2个参数：border-radius:10px 20px/5px 10px;Css3 边框详讲_css3_13

 

 

 

3个参数：border-radius:10px 20px 30px/5px 10px 15px;Css3 边框详讲_圆角_14

 

 

 

4个参数：border-radius:10px 20px 30px 40px/5px 10px 15px 20px;Css3 边框详讲_css3_15

 

 

 

 

Css3 边框详讲_html_16 

Css3 边框详讲_圆角_17

 

 

 

 

 

除了上面的 还有一些是分开个，可以设置单个角

border-radius属性可以分开，分别为四个角设置相应的圆角值，分别是： 

1）border-top-right-radius：右上角；

2）border-bottom-right-radius：右下角；

3）border-bottom-left-radius：左下角；

4）border-top-left-radius：左上角；

自己去试即可。

 

 

例：写出下面2个样式：

Css3 边框详讲_圆角_18

 

解析：

其实第一个就是一个半圆，然后加个边框:

Css3 边框详讲_html_09Css3 边框详讲_css3_10

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius属性</title>
<style type="text/css">
#div1
{

height: 100px;
width: 100px;
border-radius:100% 0 0 0 / 100% 0 0 0;
border-left: 5px solid #5e77bf;
background-color: transparent;
  
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

1

第二个全圆 然后来个边框

Css3 边框详讲_html_09Css3 边框详讲_css3_10

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius属性</title>
<style type="text/css">
#div1
{


height: 100px;
width: 100px;
border-radius:50%;
border: 30px solid #5e77bf;

  
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

2

 

Css3 边框详讲_圆角_23

 

 

 

任意相邻圆角的半径和大于边框长度时，会按照比例减少半径值，直到他们不会被重叠 任意圆角的水平半径和垂直半径比例恒定不变（水平半径过长，超过边框长度时，会将水平半径 缩小，对应会按照比例减少垂直半径的长度）


作者：​​咸瑜​​​​