每周学习总结一
作者：互联网
一、css3的三角形画法
（一）、原理
通过对于边框的设置，来画出三角形。
width: 50px;
height: 50px;
border-bottom: 50px red solid;
border-top: 50px green solid;
border-left: 50px yellow solid;
border-right: 50px blue solid;
当设置盒子的宽高为0时，就是由四个三角形维成的一个正方形。
（2）三角形的组成
当三个方向的颜色为透明，就能形成一个执行某个方向的三角形
width: 0px;
height: 0px;
border-bottom: 50px transparent solid;
border-top: 50px green solid;
border-left: 50px transparent solid;
border-right: 50px transparent solid;
只有边框的顶端会显现，就会出现一个向下的三角形，其余类似。
（3）不规则三角形的思路（边框的宽度是指的是：从边框到中心的距离。）
1.底或者顶为最长边框
width: 0px;
height: 0px;
border-top: 50px transparent solid;
border-bottom: 50px green solid;
border-left: 100px transparent solid;
border-right: 50px transparent solid;
bottom：50px代表：从底向上的高度为50px
left：100px代表：左边向右边边框的距离为100px
right：50px表示：右边向左边边框的距离为50px
2.底和定不是最长边框：通过css3的旋转来调整
width: 0px;
height: 0px;
border-top: 50px transparent solid;
border-bottom: 50px green solid;
border-left: 100px transparent solid;
border-right: 50px transparent solid;
transform: rotate(135deg);
二、css3圆角属性border-radius
（一）、原理
将一个盒子分为4分，控制每一份的弧形。
border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：
（二）、百分比含义
百分比是对于盒子的总体宽高百分比的设置。
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 50%;
设置盒子宽高100px，百分之50，就代表4块区域中的每一块弧度的长宽都是50px。
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 50%; 
当长宽不一样时，百分比算出来的值也会不同，导致每一块区域的长宽不一样，就会产生椭圆。
每一块宽为100px，长为50px
（三、固定值的含义）
在长宽一致时，固定在和百分比的作用基本一致（我觉得是完全一样的。）
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 50px;
在长宽不一样时候：
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 50px; 
每块区域的长宽都只变动50px，（类似下图）
（4）小知识点
1.因为是每个区域的长宽，所以实际上每个区域能传入两个值，第一个值：长，第二个值：宽。
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 100px/50px;
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 50%/40%;
2.百分比和固定值会产生的误差。
因为边框的产生，导致数值产生误差，需要设置为ie盒模型，在设置宽度时将边框数值包括进去，才不会导致误差
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 100px/50px;
border: 5px red solid;
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 100px/50px;
box-sizing: border-box;
border: 5px red solid;
标签：总结,每周,solid,50px,100px,height,学习,width,border 来源： https://www.cnblogs.com/kongxudeshenghuo/p/15943266.html