每周学习总结一

本文主要是介绍每周学习总结一，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

这篇关于每周学习总结一的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！