每周学习总结一

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

每周学习总结一

 

上一篇:快速解决PyQt安装失败或复杂的问题


下一篇:css3 多种奇特效果