1、一個可以讓任何元素都垂直居中的黑魔法
html, body {
? height: 100%;
? margin: 0;
}
body {
? -webkit-align-items: center;?
? -ms-flex-align: center;?
? align-items: center;
? display: -webkit-flex;
? display: flex;
}
2、選擇元素1-n個元素
example:
/* 選擇第 1 至第 3 個元素并顯示出來 */
li:nth-child(-n+3) {
? display: block;
}
/*配合not()
.test-nth-child ul li:not(:nth-child(-n+2)){
border-bottom: 1px solid #e3e3e3;
}
3、svg在所有分辨率下都可以良好縮放，請丟掉png、jpg
4、表格等寬
.calendar {
? table-layout: fixed;
}
5、shape-outside 相對其他人你是圓的
6、background角向漸變conic-gradient(red,yellow,blue)
7、背景虛化 filter:blur(2px)
8、animation：動畫名稱，一個周期花費時間，運動曲線（默認ease），動畫延遲（默認0），播放次數（默認1），是否反向播放動畫（默認normal），是否暫停動畫（默認running）
9、修改瀏覽器默認滾動條
/*滾動條 start*/
::-webkit-scrollbar {
? width: 1px;
? height: 4px;
? background-color: #F5F5F5;
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track {
? box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
? background: #fff ;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb {
? border-radius: 3px;
? box-shadow: inset 0 0 6px rgba(0,0,0,.3);
? // background-color:rgba(7, 170, 247, 0.7);
? background-color: transparent;
}
::-webkit-scrollbar-thumb:hover {
? border-radius: 3px;
? box-shadow: inset 0 0 6px rgba(0,0,0,.3);
? background-color:rgba(7, 170, 247, 1);
}
