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

小小茂茂發表於2018-08-07

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

七、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>
複製程式碼

效果圖

八、多邊框

先上效果圖

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

方案一：`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>
複製程式碼

特點

outline 不受 border-radius 影響（可以製作出一種方邊框一種圓角邊框）
outline 和 border 一樣可以自定義邊框樣式
可以通過 outline-offset控制 outline 的位置
邊框數量有限（加上 ::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>
複製程式碼

特點

邊框樣式單一
可以製作漸變邊框
可以製作圓角邊框
邊框數量不像方案一有限制

使用建議：

需要兩種邊框、多樣式邊框時可以優先使用方案一，需要漸變邊框、多層邊框可以使用方案二，雖說方案一使用偽元素後可以高達8種邊框，但是樣式程式碼眾多，不太建議，當然具體使用情況各位小哥哥、小姐姐可以根據實際需求，也可以結合方案一和方案二製作多邊框

感謝 @Vinsea 的提議

九、BFC

什麼是 BFC

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

產生條件

float 的值不為 none
position 的值不為 static 或者 relative
display 的值為 table-cell, table-caption, inline-block, flex, 或者 inline-flex 中的其中一個
overflow 的值不為 visible
display:flow-root: 最安全無副作用的做法（但是相容頭疼）

特性

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

使用場景

用於清除浮動，計算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>
複製程式碼

自適應兩欄佈局

<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>
複製程式碼

解決margin疊加問題

篇幅有限想了解更多可以去 w3cplus BFC 詳解

感謝 @百草園的提議

十、新一代變數騷操作（ CSS 自定義屬性）

效果圖

不好意思又是音樂播放器的圖，只因為喜歡聽音樂

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

根元素設定全域性自定義屬性

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

將全域性自定義屬性設定為 SASS 變數

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

為什麼使用 SASS 變數做為自定義屬性的載體
1. 方便管理（統一的var.scss檔案編寫主題變數）
1. 避免直接修改全域性自定義屬性

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地址

音樂播放器展示地址

十一、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。

drop-shadow 濾鏡可以給元素或圖片非透明區域新增投影
將背景透明的 PNG 圖示施加一個不帶模糊的投影，就等同於生成了另外一個顏色的圖示
再通過 overflow:hidden 和位移處理將原圖示隱藏

PS：我測試過大部分裝置還是可行的，不過我寫的 demo (react 版音樂播放器) 涉及眾多奇淫技巧，所以還是不做參考

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

感謝

張鑫旭的個人主頁

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

Tips

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

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

不定期更新的CSS奇淫技巧（一）
2018-06-06
CSS
「奇淫技巧」如何寫最少的程式碼
2020-12-14
Gradle更小、更快構建APP的奇淫技巧
2019-01-04
GradleAPP
ASP.NET Core 奇淫技巧之動態WebApi
2019-06-12
ASP.NETWebAPI
Groovy獲取Bean兩種方式（奇淫技巧操作）
2021-12-13
Bean
大話後端開發的奇淫技巧大集合
2018-05-25
後端
將音訊檔案轉二進位制分包儲存到Redis（奇淫技巧操作）
2020-07-23
音訊Redis
谷歌瀏覽器高階使用奇淫技巧（實用匯總）
2019-03-08
谷歌瀏覽器
Python魔法：20個讓你程式設計事半功倍的奇淫技巧（建議收藏）
2024-03-08
Python程式設計
JavaScript系列--JavaScript陣列高階函式reduce()方法詳解及奇淫技巧
2019-06-26
JavaScript陣列函式
Github和git的學習（不定期更新）
2024-10-13
Github
CSS 奇思妙想 | Single Div 繪圖技巧
2021-06-01
CSS繪圖
JavaScript 系列--JavaScript一些奇淫技巧的實現方法（三）數字取整，陣列求和
2019-06-06
JavaScript陣列
前端也要會的資料結構（不定期更新篇）
2018-08-06
前端資料結構
JavaScript 系列--JavaScript一些奇淫技巧的實現方法（一）簡短的sleep函式，獲取時間戳
2019-05-30
JavaScript函式時間戳
Linux 相關學習內容（不定期更新）
2020-07-08
Linux
Android年薪30萬面試寶典-不定期更新
2021-09-09
Android面試
css揭祕實戰技巧 - 形狀 [二]
2019-04-29
CSS
JavaScript 系列--JavaScript一些奇淫技巧的實現方法（二）數字格式化 1234567890轉1,234,567,890；argruments 物件(類陣列)轉換成陣列
2019-05-31
JavaScript物件陣列
【CSS】CSS常用技巧
2018-11-21
CSS
【eos不定期更新的日常】系統合約最近升級了什麼？
2018-09-10
常用的CSS小技巧
2018-08-11
CSS
CSS Tricks - 你應該知道的 CSS 技巧
2018-10-29
CSS
CSS 常用技巧
2018-06-13
CSS
canvas 奇巧淫技（二）繪製箭頭路徑效果
2019-03-03
Canvas
CSS的再深入（更新中···）
2018-09-27
CSS
CSS3的那些奇淫巧技（一）
2019-10-29
CSSS3
[技巧] 亂搞技巧長期更新
2024-10-21
CSS奇思妙想 -- 使用 CSS 創造藝術
2021-01-27
CSS
前端奇淫技術：圖片壓縮、方向糾正、預覽、上傳外掛
2019-02-27
前端
Css實用技巧
2019-04-04
CSS
css除錯技巧
2019-01-06
CSS除錯
css 技巧彙總
2018-06-30
CSS
HTML + CSS 小技巧
2018-07-01
HTMLCSS
css常用技巧梳理
2023-03-08
CSS
愈發熟練的 CSS 技巧
2018-05-27
CSS
《css世界》的那些實用技巧
2018-03-27
CSS
推薦一些資料視覺化相關網站（不定期更新）
2018-04-27
視覺化網站

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

七、CSS 絕對底部

程式碼：

效果圖

八、多邊框

先上效果圖

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

程式碼：

特點

方案二：box-shadow 方案

程式碼：

特點

使用建議：

九、BFC

什麼是 BFC

產生條件

特性

使用場景

十、新一代變數騷操作（ CSS 自定義屬性）

效果圖

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

十一、PNG 格式小圖示的 CSS 任意顏色賦色技術

程式碼：

效果圖

原理：

感謝

Tips

相關文章

方案一：`border + outline` （偽元素）方案

方案二：`box-shadow` 方案