不按期更新的CSS奇淫技巧（二）

拖更好久，各位小哥哥、小姐姐別介意，今天原本會死在襁褓（草稿待了一個月）中的 不按期更新的CSS奇淫技巧（二）終於出來了，本文可能會水份居多，若有問題歡迎提議我會逐步榨乾它

7、CSS 絕對底部

代碼：

方案一：原理————正（padding）負（margin）抵消法
<style>
* {
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
}
#wrap {
    height: auto; 
    min-height: 100%;
}
#main {
    padding-bottom: 150px; /* 和footer相同的高度 */
}  
#footer {
    margin-top: -150px; /* footer高度的負值 */
    height: 150px;
	background: #0c8ed9
}
</style>

<div id="wrap">
    <div id="main">正文</div>
</div>
<div id="footer">底部</div> <!--底部和外層同級-->

方案二：原理———— flex 佈局
<style>
* {
    margin: 0;
    padding: 0;
}
#wrap {
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
}
#main {
    flex:1;
}  
#footer {
    height: 150px;
	background: #0c8ed9
}
</style>
<div id="wrap">
    <div id="main">正文</div>
    <div id="footer">底部</div>
</div>
複製代碼

效果圖

8、多邊框

先上效果圖

篇幅有限、效果圖單一，有興趣的小哥哥、小姐姐可自行配置其餘效果

方案一：border + outline （僞元素） 方案

代碼：

<style>
* {
    padding: 0;
    margin: 0;
}
body {
    margin: 150px;
}
.one-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 310px;
    height: 310px;
}
/*
 * 因爲使用僞元素和 outline 製做的邊框是脫離文檔流的，建議再套一個 div 並使用水平垂直居中 防止影響其餘樣式
 */
.one {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: #999;
    border: 10px double #ff0000;
    outline: 10px solid rgb(255, 136, 0);
    outline-offset: 0px; /* 控制 outline 的偏移位置 */
}
.one::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    bottom: -40px;
    left: -40px;
    z-index: -1;
    background-color: #f7fc00;
    background-clip: content-box; /* 當使用僞元素的背景作爲邊框時須要使用該屬性控制背景的區域 */
    border: 10px dashed rgb(56, 252, 8);
    outline: 10px inset rgb(3, 194, 252);
}
.one::after {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    bottom: -70px;
    left: -70px;
    z-index: -2;
    background-color: #fc000d;
    background-clip: content-box; /* 當使用僞元素的背景作爲邊框時須要使用該屬性控制背景的區域 */
    border: 10px dotted rgb(56, 252, 8);
    outline: 10px outset rgb(252, 3, 177);
}
</style>
<div class="one-box">
    <div class="one">方案一</div>
</div>
複製代碼

特色

1. outline 不受 border-radius 影響（能夠製做出一種方邊框一種圓角邊框）
2. outline 和 border 同樣能夠 自定義邊框樣式
3. 能夠經過 outline-offset控制 outline 的位置
4. 邊框數量有限（加上 ::before / ::after 的 background / border / outline 最多 8 種邊框）

方案二：box-shadow 方案

代碼：

<style>
* {
    padding: 0;
    margin: 0;
}
body {
    margin: 150px;
}
.two {
    width: 150px;
    height: 150px;
    padding: 110px;
    background-color: #999;
    box-shadow:inset 0 0 0 10px #ff0000,
               inset 0 0 0 20px rgb(255, 136, 0),
               inset 0 0 0 30px rgb(166, 255, 0),
               inset 0 0 0 40px rgb(0, 102, 255),
               inset 0 0 0 50px rgb(255, 0, 221),
               inset 0 0 0 60px rgb(0, 255, 191),
               inset 0 0 0 70px rgb(225, 0, 255),
               inset 0 0 0 80px rgb(81, 255, 0),
               inset 0 0 0 90px rgb(255, 0, 106),
               inset 0 0 0 100px rgb(255, 153, 0),
               inset 0 0 0 110px rgb(30, 255, 0);
    /*
     *對象選擇器 {box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色}
     */
}
</style>
<div class="two"></div>
複製代碼

特色

1. 邊框樣式單一
2. 能夠製做漸變邊框
3. 能夠製做圓角邊框
4. 邊框數量不像方案一有限制

使用建議：

須要兩種邊框、多樣式邊框時能夠優先使用方案一，須要漸變邊框、多層邊框可使用方案二，雖然說方案一使用僞元素後能夠高達8種邊框，可是樣式代碼衆多，不太建議，固然具體使用狀況各位小哥哥、小姐姐能夠根據實際需求，也能夠結合方案一和方案二製做多邊框

感謝 @Vinsea 的提議

9、BFC

什麼是 BFC

W3C 定義：浮動，絕對定位元素，inline-blocks, table-cells, table-captions,和overflow的值不爲visible的元素，（除了這個值已經被傳到了視口的時候）將建立一個新的塊級格式化上下

產生條件

1. float 的值不爲 none
2. position 的值不爲 static 或者 relative
3. display 的值爲 table-cell, table-caption, inline-block, flex, 或者 inline-flex 中的其中一個
4. overflow 的值不爲 visible
5. display:flow-root: 最安全無反作用的作法 （可是 兼容 頭疼）

特性

1. 內部的Box會在垂直方向，從頂部開始一個接一個地放置。
2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生疊加
3. 每一個元素的margin box的左邊， 與包含塊border
4. box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
5. BFC的區域不會與float box疊加。
6. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然。
7. 計算BFC的高度時，浮動元素也參與計算

使用場景

1. 用於清除浮動，計算BFC高度

ul {
    overflow: hidden; /*建立 BFC */
}
li {
    float: left;
    width: 100px;
    height: 200px;
    background-color: #f7fc00;
    overflow: hidden;
}
li:first-child{
    background-color: #fc000d;
}
</style>
<ul>
    <li></li>
    <li></li>
</ul>
複製代碼

2. 自適應兩欄佈局

<style>
.aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #ff0000;
}
.main {
    height: 200px;
    background: #f7fc00;
    overflow: hidden; /*建立 BFC */
}
</style>
<div class="aside"></div>
<div class="main"></div>
複製代碼

3. 解決margin疊加問題

篇幅有限 想了解更多能夠去 w3cplus BFC 詳解

感謝 @百草園 的提議

10、新一代變量騷操做（ CSS 自定義屬性）

效果圖

很差意思又是音樂播放器的圖，只由於喜歡聽音樂

代碼（我在音樂播放器中的使用）

1. 根元素設置全局自定義屬性

:root {
	--THEME: var(--USER-THEME-COLOR, #e5473c);
	--THEME-COLOR: var(--USER-THEME-COLOR, #e5473c);
}
複製代碼

2. 將全局自定義屬性設置爲 SASS 變量

$theme-color: var(--THEME);
$theme-bg: var(--THEME);
複製代碼

• 爲何使用 SASS 變量作爲自定義屬性的載體
• 1. 方便管理（統一的var.scss文件編寫主題變量）
• 2. 避免直接修改全局自定義屬性

3. JS 修改全局自定義屬性

const elm = document.documentElement
const colorArr = ['#e5473c', '#31c27c', '#0c8ed9', '#f60']
elm.style.setProperty('--USER-THEME-COLOR', colorArr[i])
i = (i + 1) % colorArr.length
複製代碼

更多介紹 ==> CSS自定義屬性使用指南

效果圖Github地址

音樂播放器展現地址

11、PNG 格式小圖標的 CSS 任意顏色賦色技術

代碼：

<style>
.icon-color{
	display: inline-block;
	width: 144px;
	height: 144px;
	background: url('https://user-gold-cdn.xitu.io/2018/7/31/164f0e6745afe2ba?w=144&h=144&f=png&s=2780') no-repeat center / cover;
	overflow: hidden;
}
.icon-color:after{
	content: '';
	display: block;
	height: 100%;
	transform: translateX(-100%);
	background: inherit;
	filter: drop-shadow(144px 0 0 #42b983); // 須要修改的顏色值
}
</style>

<i class="icon-color"></i>
複製代碼

效果圖

原理：

使用 CSS3 濾鏡 filter 中的 drop-shadow。

1. drop-shadow 濾鏡能夠給元素或圖片非透明區域添加投影
2. 將背景透明的 PNG 圖標施加一個不帶模糊的投影，就等同於生成了另一個顏色的圖標
3. 再經過 overflow:hidden 和位移處理將原圖標隱藏

PS：我測試過大部分設備仍是可行的，不過我寫的 demo (react 版音樂播放器) 涉及衆多奇淫技巧，因此仍是不作參考

原文地址：高產的張鑫旭大佬

感謝

張鑫旭的我的主頁

w3cplus_引領web前沿，打造前端精品教程

Tips

當各位遇到佈局問題的時候能夠去各大 UI 框架翻你要實現的效果的代碼，看看他們是如何解決的，我遇到樣式佈局的坑基本就這樣整，除非特別罕見的通常都能這樣解決

上期連接 -- 不按期更新的CSS奇淫技巧（一）