Css3 边框详讲
作者：互联网
我们应该熟知 CSS 的 各个浏览器的前缀：
由于CSS3很多属性尚未成为W3C标准的一部分，因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性。我们在书写CSS3代码时，需要在属性前加上浏览器的私有前缀，然后该种内核的浏览器才能识别相应的CSS3属性。
边框
CSS3边框圆角的实现： border-radius
语法：border-radius: none ｜ length{1,4} [/length{1,4}其中每一个值可以为数值或百分比的形式。
length/length 第一个lenght表示水平方向的半径，而第二个表示竖直方向的半径。
设置四个角的话直接一个值。
但是角的顺序是这样的：
当给的值不一样的时候，设置的角也是不一样，即：
1个参数：border-radius:10px; /* 表示4个角的值是一样的。 */
2个参数：border-radius:10px 20px; /* 上左、下右的半径值是10px ;上右、下左的半径值是20px */
3个参数：border-radius:10px 20px 30px; /* 上左10px;上右、下左20px; 下右30px*/
4个参数：border-radius:10px 20px 30px 40px; /* 对应的是上左(top-left)→上右(top-right)→下右 (bottom-right)→下左(bottom-left) 四个角的半径值 */
但是 如果你想设置有些形状，那么其实他是和 长度和宽度有关的：
案例： 实心半圆
我们只要掌握制作一 个方向的实心半圆的方法，其他方向的实心半 圆就可以轻松实现，因为原理都一样。
假如我们要制作实现上半圆，实现方法：把高 度(height)设为宽度（width）的一半，并且只 设置左上角和右上角的圆角半径与元素的高度 一致，而右下角和左下角的圆角半径设置为0。
<!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,详讲,边框,radius,10px,半径,20px,border 来源： https://www.cnblogs.com/bi-hu/p/15433032.html