绘制三角形
- border
<div class="block"></div>
.block {
height: 0;
width: 0;
border-width: 50px;
border-style: solid;
border-color: yellowgreen transparent transparent transparent;
/* border-top: 50px solid yellowgreen;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent; */
}
- 渐变
/* 线性渐变 */
.block {
height: 100px;
width: 100px;
/* 从左下到右上，从蓝色开始渐变、到50%位置是透明色渐变开始、最后以透明色结束 */
background: linear-gradient(45deg, yellowgreen, yellowgreen 50%, transparent 50%, transparent 100%);
}
/* conic-gradient(圆锥渐变) */
.block {
height: 100px;
width: 100px;
/* 绘制圆心在（0, 0），绘制起点在90度，从蓝色开始绘制到45度的位置，从45.1度开始绘制透明色 */
background: conic-gradient(from 90deg at 0 0, blue 0, blue 45deg, transparent 45.1deg);
}
- 伪元素 + css transform
.block {
display: inline-block;
height: 100px;
width: 141px; // 100 * 1.41
position: relative;
overflow: hidden;
}
.block::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: blue;
/* 旋转原点在(0, 0），旋转90度 */
transform-origin: 0 0;
transform: rotate(45deg);
}
- clip-path裁剪
.block {
display: inline-block;
height: 100px;
width: 100px;
background: blue;
/* 以多边形进行裁剪 */
clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
- 特殊字符
◄ : ◄
► : ►
▼ : ▼
▲ : ▲
⊿ : ⊿
△ : △
水平垂直居中
- < 元素宽高未知 >
/* 绝对定位 + transform */
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
----------------------------------------------------
/* flex/grid */
.parent{
display: flex/grid;
justify-content: center;
align-items: center;
}
----------------------------------------------------
/* flex/grid + margin */
.parent{
display: flex/grid;
}
.child {
margin: auto;
}
----------------------------------------------------
/* grid + flex */
.parent{
display: grid;
}
.child {
align-self: center;
justify-self: center; // grid项目属性，设置单元格水平位置
}
----------------------------------------------------
/* table-cell */
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
}
- < 元素宽高已知 >
/* 绝对定位 + l/r/b/t + margin：auto */
.parent{
position: relative;
}
.child{
position: absolute;
top/left/bottom/right: 0;
margin:auto;
}
----------------------------------------------------
/* flex布局/grid布局 */
----------------------------------------------------
/* table-cell + vertical-align + inline-block/margin: auto */
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block; // 或者margin: auto;
}
----------------------------------------------------
/* (绝对定位 + margin:负值) 或 (绝对定位 + transform) */
.parent{
width: 200px;
height: 200px;
position: relative;
}
.child{
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
/* transform: translate(-50%,-50%); // 替代margin负值 */
}
div实现高度根据宽度自适应
/* 以宽高1：1为例 */
(1) padding实现
padding-bottom: 50%; // 上下内边距与左右内边距一致，百分数会相对于父元素宽度设置
height: 0;
width: 50%;
(2) vw实现
width: 50vw;
height: 50vw;
(3) js实现(不推荐)
div{width:50%;}
window.onresize = () => {div.height(div.width);}
(4) zoom实现(ie专属)
width: 50%;
zoom: 1;
(5) float实现
网站置灰
适用背景：重大事件发生
- 全站置灰: 添加滤镜 (1) filter滤镜
(2) svg滤镜, 兼容低版本浏览器
- 首屏置灰
(1)
backdrop-filter+pointer-events: none
滤镜效果同filter, 区别在于 filter作用于当前元素和它的子元素; backdrop-filter作用于当前元素背后的区域所覆盖的所有元素
/* 以滚动页面为例, 实现首屏的置灰遮罩效果 */
html {
position: relative;
width: 100%;
height: 100%;
overflow: scroll;
}
html::before {
content: "";
position: absolute;
inset: 0; // 等价于 top: 0; right: 0; bottom: 0; left: 0;
backdrop-filter: grayscale(95%);
z-index: 10;
pointer-events: none; // 取消遮罩层交互效果
}
(2) 混合模式：mix-blend-mod + pointer-events: none
兼容性更好
// 叠加黑色背景，实现置灰效果
html {
xxxxxx
background: #fff;
}
html::before {
xxxxxx
background: rgba(0, 0, 0, 1);
mix-blend-mode: color|saturation|hue;
}
参考链接:
