border-radius的使用_综合

border-radius的基本使用，使用border-radius画半圆

在日常项目过程中，border-radius这个属性算是非常常用的属性之一了，通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。
border-radius的使用

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>border-radius的使用</title></head><body><div class="demo"></div><div class="semicircle"></div><style>.demo{width:200px;height:200px;border:1px solid #ccc;background-color:#f60;margin: 50px auto;/*100表示X轴的 50px表示y轴的*/border-top-left-radius:100px 50px;border-top-right-radius: 50%;border-bottom-left-radius:60px;border-bottom-right-radius:60px;/*等于 顺时针方向*//*border-radius: 50% 50% 60px 60px;*/}.semicircle{width:200px;height:100px;margin:50px auto;background-color:pink;border-radius: 0 0 100px 100px;}</style></body>
</html>

border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，我们常用的有三种写法

1设置一个值如下
border-radius:10px;表示上下左右都是10px

2设置四个值
border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，因此，border-radius : 30px;，其实等价于border-radius : 30px 30px 30px 30px;（ps：与padding和margin一样，各个数字之间用空格隔开）。
注/100表示X轴的 50px表示y轴的/
border-top-left-radius:100px 50px;
　　这里要注意四个数值的书写顺序，不同于padding和margin的“上、右、下、左”的顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序

3.省略部分值
border-radius:50px 0;表示border-top-left-radius 50px、border-top-right-radius 0、border-bottom-right-radius 50px、border-bottom-left-radius 0px

border-radius完整结构形式（扩展了解一下，个人感觉好像用不到）
　　在W3C上查border-radius属性时，会发现上面描述的语法是这样的：

border-radius: 1-4 length|% / 1-4 length|%;
　　这是什么意思呢，我也看不懂，后来百度了解到，这是border-radius的完整写法，我们平时的写法其实都是简写，平时我们写的border-radius : 50px，其实完整的写法应该是：

border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;
/前四个表示x轴，后四个边上y轴，数值越大变的越小/
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
　　“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径，什么是水平半径和垂直半径呢，见下图
border-radius的使用