一、css3的三角形畫法
(一)、原理
通過對於邊框的設定,來畫出三角形。
當設定盒子的寬高為0時,就是由四個三角形維成的乙個正方形。
(2)三角形的組成
當三個方向的顏色為透明,就能形成乙個執行某個方向的三角形
只有邊框的頂端會顯現,就會出現乙個向下的三角形,其餘類似。
(3)不規則三角形的思路(邊框的寬度是指的是:從邊框到中心的距離。)
1.底或者頂為最長邊框
bottom:50px代表:從底向上的高度為50px
left:100px代表:左邊向右邊邊框的距離為100px
right:50px表示:右邊向左邊邊框的距離為50px
2.底和定不是最長邊框:通過css3的旋轉來調整
二、css3圓角屬性border-radius
(一)、原理(二)、百分比含義將乙個盒子分為4分,控制每乙份的弧形。
border-radius: 15px 50px 30px 5px;(依次分別用於:左上角、右上角、右下角、左下角):
百分比是對於盒子的總體寬高百分比的設定。
設定盒子寬高100px,百分之50,就代表4塊區域中的每一塊弧度的長寬都是50px。
當長寬不一樣時,百分比算出來的值也會不同,導致每一塊區域的長寬不一樣,就會產生橢圓。
每一塊寬為100px,長為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;
每週學習總結
2021.3.20 貪心演算法專題。錯誤思路1,用multiset陣列,把第n天截止的商品按照價值排序,之後從第一天開始首先取每天的最大值,如果有一天沒有該截止日期的商品就從開始順序找。很明顯這種做法,忽略了後面天數的商品價值大的情況。錯誤思路2,也是用multiset陣列,把商品價值排序,但區別與...
2021 3 19每週學習總結
這一星期,學習了貪心演算法,經過了一星期的貪心演算法的學習,了解了一些問題的解題思路,這裡把題目如何下手和需要注意的問題寫一下 1 有一批貨櫃要裝上一艘載重量為c的輪船,其中貨櫃i的重量為wi。最優裝載問題要求確定在裝載體積不受限制的情況下,將盡可能多的貨櫃裝上輪船 則先用sort對重量從小到大排序...
每週總結 12 5 12 11
關於時間格式 string型別轉date型別 string datestr2 2012 01 10t00 00 00 replace t dateformat dateformat new dateformat yyyy mm dd hh mm ss date date dateformat.par...