标签：总结 每周 solid 50px 100px height 学习 width border

一、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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。