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

时间 2019-11-05

标签按期更新 css 技巧栏目 CSS 繁體版

原文原文链接

拖更好久，各位小哥哥、小姐姐别介意，今天原本会死在襁褓（草稿待了一个月）中的不按期更新的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>
复制代码

特色

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种边框，可是样式代码众多，不太建议，固然具体使用状况各位小哥哥、小姐姐能够根据实际需求，也能够结合方案一和方案二制做多边框html

感谢 @Vinsea 的提议前端

9、BFC

什么是 BFC

W3C 定义：浮动，绝对定位元素，inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素，（除了这个值已经被传到了视口的时候）将建立一个新的块级格式化上下react

产生条件

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 详解css3

感谢 @百草园的提议git

10、新一代变量骚操做（ CSS 自定义属性）

效果图

很差意思又是音乐播放器的图，只由于喜欢听音乐 github

代码（我在音乐播放器中的使用）

根元素设置全局自定义属性

: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自定义属性使用指南web

效果图Github地址安全

音乐播放器展现地址bash

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。

drop-shadow 滤镜能够给元素或图片非透明区域添加投影
将背景透明的 PNG 图标施加一个不带模糊的投影，就等同于生成了另一个颜色的图标
再经过 overflow:hidden 和位移处理将原图标隐藏

PS：我测试过大部分设备仍是可行的，不过我写的 demo (react 版音乐播放器) 涉及众多奇淫技巧，因此仍是不作参考

原文地址：高产的张鑫旭大佬

感谢

张鑫旭的我的主页

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

Tips

当各位遇到布局问题的时候能够去各大 UI 框架翻你要实现的效果的代码，看看他们是如何解决的，我遇到样式布局的坑基本就这样整，除非特别罕见的通常都能这样解决

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