1. 多列布局(Multi-column Layout)
MDN – CSS Multi-column Layout
Can I Use – CSS3 Multi-column Layout
CSS 提供了对多列布局的反对。反对设置布局中的列数 (column-count
)、内容应如何列之间的流动规定、列之间的间距 (column-gap
) 以及列分割线(column-rule
)的款式。
比方能够实现上面的瀑布流成果:
Codepen demo
次要款式:
.masonry {
width: 1440px;
margin: 20px auto;
columns: 4;
column-gap: 30px;
.item {
width: 100%;
break-inside: avoid;
margin-bottom: 30px;
img {width: 100%;}
}
}
2. 书写模式(Writing Modes)
MDN – CSS Writing Modes
Can I Use – CSS writing-mode property
Writing Modes 定义了各种国内书写模式,例如从左到右(拉丁语、印度语)、从右到左(希伯来语、阿拉伯语)、双向(混合从左到右和从右到左的语言)和垂直(汉语)。
上面是三种书写形式的展现:
Codepen demo
要害款式:
.left-to-right {direction: ltr;}
.right-to-left {direction: rtl;}
.vertical {writing-mode: vertical-rl;}
或者,能够用来实现一个黑客帝国的 code rain:
Codepen – Matrix code rain
3. aspect-ratio
属性
MDN – aspect-ratio
Can I Use – CSS property: aspect-ratio
CSS 的 aspect-ratio
属性用于设置元素的首选宽高比,能够主动计算宽度、高度和其余一些布局性能,省去同时计算宽和高的工作。
比方,视频网站能够设置视频播放窗口比例为 16/9:
Codepen demo
要害款式:
.video-box {
width: 70vw;
background-color: #000;
aspect-ratio: 16/9;
}
4. gap
属性
MDN – gap
Can I Use – gap property for Flexbox
CSS 的 gap
属性用于 flex 和 grid 布局时设置行和列之间的距离,是 row-gap
和 column-gap
的简写。
以前在应用 flex 布局的时候常常会用 margin
、padding
来管制 flex item 之间的距离,用 gap
会更不便。
比方:
<div class="flex-box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.flex-box {
display: flex;
width: 400px;
flex-wrap: wrap;
gap: 20px;
}
.item {
width: 120px;
height: 60px;
background-color: c·rimson;
}
Codepen demo
5. CSS Shapes
MDN – CSS Shapes
Can I Use – CSS Shapes Level 1
CSS Shapes 用于形容元素的几何形态。元素的惯例形态就是矩形,应用 CSS Shapes 能够将元素定义为圆、椭圆或多边形。
对于 Level 1 标准,CSS Shapes 能够利用于浮动元素。该标准定义了不同的办法来定义浮动元素上的形态。
比方,实现上面文字盘绕圆形图片的成果:
Codepen demo
要害款式:
img {
width: 300px;
float: left;
shape-outside: circle(50%);
}
6. object-fit
属性
MDN – object-fit
Can I Use – CSS3 object-fit/object-position
object-fit
属性用于设置 replaced element(例如 <img>
或 <video>
)的内容如何适配其容器的尺寸。
比方,调整一张图片在容器外面的显示:
Codepen demo
7. filter
属性
MDN – filter
Can I Use – CSS Filter Effects
CSS 的 filter
属性将图像的成果调整(含糊、对比度、灰度、色调等)利用于元素。filter
通常用于调整图像、背景和边框的渲染。
比方,每年的国家公祭日很多网站会把色彩调整成黑白,就能够用 filter
一行代码搞定:
8. backdrop-filter
属性
与 filter
相似的属性,backdrop-filter
属性将图形成果(例如含糊或色彩偏移)利用于元素的背景区域。因为它实用于元素前面的所有内容,应用时须要将元素或其背景至多局部设置为通明能力看到成果。
MDN – backdrop-filter
Can I Use – CSS Backdrop Filter
比方,能够用它做一个毛玻璃的成果:
Codepen demo
要害代码:
<div class="box">
<p>
If I know what love is
<br />it is because of you
</p>
</div>
.box {background: url(../images/roses.jpg) no-repeat;
}
p {background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(20px);
color: white;
}
9. conic-gradient()
函数
MDN – conic-gradient()
Can I Use – conic-gradient()
CSS 中的 linear-gradient()
函数大家应该接触的不少,除此之外 gradient 家族中还有 radial-gradient()
、conic-gradient()
等,更多类型可参考 MDN – gradient。
conic-gradient()
函数创立一个图像,该图像由渐变色组成,色彩围绕中心点旋转过渡(而不是从核心辐射)。
例如,常见的渐变色仪表盘图表就能够用 conic-gradient()
函数绘制:
Codepen demo
10. accent-color
属性
MDN – accent-color
Can I Use – CSS property: accent-color
CSS 的 accent-color
属性用于设置由某些元素生成的 UI 控件的强调色。比方 <input>
元素生成的 checkbox
和 radio
控件被选中时的色彩。
比方,扭转以下元素的强调色:
Codepen demo
要害代码:
<input type="checkbox" class="checkbox" checked />
<input type="radio" class="radio" checked />
<input type="range" class="range" />
<progress value="70" max="100" class="progress">70%</progress>
.checkbox {
width: 40px;
height: 40px;
accent-color: crimson;
}
.radio {
width: 40px;
height: 40px;
accent-color: dodgerblue;
}
.range {
width: 200px;
accent-color: lawngreen;
}
.progress {
width: 200px;
accent-color: coral;
}
11. 滚动捕获(Scroll Snap)
MDN – CSS Scroll Snap
Can I Use – CSS Scroll Snap
CSS Scroll Snap 引入了对滚动地位的捕获,它强制执行滚动操作实现后滚动容器的滚动端口可能完结的地位。
比方,我想让每次滚动完结的地位都停在下一个元素结尾,实现一个滚动翻页的成果:
Codepen demo
要害代码:
<article class="scroller">
<section>
<h2>Page one</h2>
</section>
<section>
<h2>Page two</h2>
</section>
<section>
<h2>Page three</h2>
</section>
<section>
<h2>Page four</h2>
</section>
</article>
.scroller {
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
section {scroll-snap-align: start;}
12. overscroll-behavior
属性
MDN – overscroll-behavior
Can I Use – CSS overscroll-behavior
CSS 的 overscroll-behavior
属性用于定义元素滚动到滚动区域边界时的行为。它是 overscroll-behavior-x 和 overscroll-behavior-y 的简写。
浏览器的默认行为是:当子元素滚动到边界后持续滚动鼠标,会触发父元素的滚动。该行为被称作 scroll chaining。很多时候咱们不须要这样的行为,比方当咱们滚动一个弹窗中的内容时,不心愿前面的页面也跟着滚动。通过设置 overscroll-behavior:contain
就能够批改这一行为,而不须要监听 scroll
事件去阻止冒泡。
示例 :Codepen demo
好了,目前能想到的就是这么多,心愿对大家更高效、更优雅的画页面有帮忙 😀!