原创 AI中的對齊方式
AI中的對齊方式 圖形對齊 錨點對齊 視圖參考線對齊 藉助圖形 圖形對齊 分爲對象對齊和分佈對齊，均分爲水平和垂直對齊。居中方式有： - 左對齊：以最左邊的爲基準對齊； - 右對齊：以最右邊的爲基準對齊； -
2020-07-01 21:53:40
3
原创 vscode中如何將px轉rem
在開發h5頁面時，我們需要使用到rem單位，那麼vscode中如何將px轉rem呢？ 此處我選擇的是px to rem插件，使用步驟： 安裝px to rem插件； 然後在設置->用戶設置中->擴展中找到**px to rem
2020-07-01 21:53:39
原创 CSS自定義屬性學習筆記
使用currentColor變量時，發現了--accent-color變量，一直以來以爲CSS中的變量只有這兩個，因此寫下這篇學習筆記，好在評論區的道友指點迷津，感謝，以下是重新寫的新筆記。 找了很久關於–accent-colo
2020-07-01 21:53:39
原创 CSS3 calc()是怎麼實現計算
css3的calc()函數允許我們在屬性值中執行數學計算操作。例如，我們可以使用calc()指定一個元素寬度的固定像素值爲多個數值的和。 calc(表達式) - 表達式支持加、減、乘、除運算，同時也支持單位的混合使用（%、px
2020-07-01 21:53:39
原创 純CSS如何實現移動堆疊卡片行
1 必要CSS基礎 1.1 CSS僞類 :not()：匹配不符合選擇器的元素 :first-child：選擇一組兄弟元素中的第一個子元素 :last-child選擇一組兄弟元素中的最後一個子元素 :hover：鼠標懸浮在元素上方
2020-05-13 16:34:33
39
原创 CSS實現多重邊框
想到多重邊框，我們可能會通過多個元素來模擬實現，但是如何在一個元素上實現多重邊框呢？如下圖： 1、box-shadow 我們可以通過box-shadow來實現。 box-shadow： h-shadow v-shadow b
2020-02-20 19:57:24
原创 如何實現邊框內圓角
實現效果如下： 對於上述效果，我們可以用兩個嵌套的div實現，如下： <div class="test-wrap"> <div></div> </div> div{ width: 180px; hei
2020-02-20 19:57:24
原创 CSS3效果之3D字體
效果圖如下： css html,body,p{ padding: 0; margin: 0; } html,body{ height: 100%; } body{ display: -we
2020-02-20 19:57:23
原创 background簡寫
background是一個簡寫屬性 background: color image position/size repeat origin clip attachment initial | inherit; 它的展開式屬性爲：
2020-02-20 19:57:22
原创 純CSS製作旋轉的太極圖
效果如下： html <div class="universe-wrap"> <div class="universe"> <div></div> <div></div> </d
2020-02-20 19:57:22
原创 移動端抓包工具spy-debugger使用
1、npm install spy-debugger -g; 2、執行 spy-debugger 命令； 圖一 圖二 3、將手機和電腦連在同一個局域網； A、IOS設置： 連接網絡； 點擊詳情—>配置代理—
2020-02-20 19:57:22
原创 DIV+CSS有哪些經典佈局
DIV+CSS經典佈局總結： 1 聖盃佈局 定義：聖盃佈局就是常見的三欄式佈局——兩邊等寬，中間⾃適應的三欄佈局。 實現方式： 設置三欄子元素浮動同向（如 float: left; ）； 父元素設置左右欄寬度的padding（如
2019-06-11 17:33:52
原创 flexbox佈局詳解
申明：以下都是個人整理，如有錯誤之處，請指正，謝謝！ flexbox——一維佈局模型，只能處理一個維度（行或者列）上的佈局。由flex-container（flex容器）和flex-item（flex元素）構成，爲flex-i
2019-06-11 17:33:52
原创 CSS單位總結
CSS中，單位分爲兩類 絕對單位：無論其他相關的設置怎麼變化，絕對單位指定的值是不會變化的； 相對單位：沒有固定的度量值，是由其他元素尺寸來決定的相對值。 注意：此處的相對指當前元素的字號（font-size）或者視口（viewpo
2018-11-28 15:12:59
原创 canvas中繪製文本
canvas提供兩種文本渲染方式： fillText(text,x,y[,maxWidth]); // 在指定的（x,y）處填充文本，繪製的最大寬度是可選的 strokeText(text,x,y[,maxWidth]); // 在指
2018-11-04 12:20:51