100个css优化技巧
1.
启动平滑滚动
添加scroll-behavior：smooth到元素中
<html>
，使整个⻚⾯能够平滑滚动。
html{ scroll-behavior: smooth; }
2.
链接的属性选择器
此选择器以href属性以“https”开头的链接为⽬标。
a[href^="https"] {
color: blue;
}
3.
~⽤于合并节点
选择作为
<h2>
同级元素的所有
<p>
元素。
h2 ~ p {
color: blue;
}
4.
:not()伪类
此选择器将样式应⽤于不具有类“Special”的 li。
li:not(.special) {
font-style: italic;
}
5.
响应式排版的视窗单位 vw
使⽤视区单位(vw, vh, vmin, vmax)可以使字体⼤⼩与视区⼤⼩相对应。
h1 {
font-size: 5vw;
}
6.
:empty 对于空元素
此选择器以空的
<p>
元素为⽬标并隐藏它们。
p:empty {
display: none;
}
7.
⾃定义特性(变量)
可以定义和使⽤⾃定义特性，以便更轻松地创建主题和进⾏维护。
:root {
--main-color: #3498db;
}
h1 {
color: var(--main-color);
}
8.
Object-fit 图像控件的适配性
object-fit 控制替换元素(如
<img>
)的内容应该如何调整⼤⼩。
img {
width: 100px;
height: 100px;
object-fit: cover;
}
9.
简化布局的⽹格
Css⽹格提供了⼀种功能强⼤的⽅式来以更直接的⽅式创建布局。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
10.
:focus-within 伪类
如果⼀个元素包含任何带有:focus的⼦元素，则:focus-Win会选择该元素。
form:focus-within {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
11.
使⽤Flexbox垂直居中
使⽤FlexBox可轻松地将内容在容器中⽔平和垂直居中。
.container {
display: flex;
align-items: center;
justify-content: center;
}
12.
⾃定义选定内容的突出显⽰颜⾊
⾃定义在⽹⻚上选择⽂本时的突出显⽰颜⾊。
::selection {
background-color: #ffcc00;
color: #333;
}
13.
设置占位符⽂本的样式
设置输⼊字段内占位符⽂本的样式。
::placeholder {
color: #999;
font-style: italic;
}
14.
渐变边界
使⽤Backback-Clip属性创建渐变边框。
.element {
border: 2px solid transparent;
background-clip: padding-box;
background-image: linear-gradient(to right, red, blue);
}
15.
使⽤vw实现可变字体⼤⼩
根据视⼝宽度调整字体⼤⼩，实现更加响应式的排版。
body {
font-size: calc(16px + 1vw);
}
16.
使⽤锥形渐变创建多彩元素
利⽤锥形渐变创建丰富多彩且动态的背景。
.element {
background: conic-gradient(#ff5733, #33ff57, #5733ff);
}
17.
使⽤clamp()函数实现响应式⽂本
使⽤clamp()函数设置字体⼤⼩的范围，确保在不同屏幕尺⼨下的可读性。
.text {
font-size: clamp(16px, 4vw, 24px);
}
18.
使⽤font-display: swap;优化字体加载
使⽤font-display: swap;属性提⾼⽹⻚字体性能，让⾃定义字体加载时显⽰备⽤字体。
@font-face {
font-family: 'YourFont';
src: url('your-font.woff2') format('woff2');
font-display: swap;
}
19.
⾃定义滚动吸附点
为了实现更顺畅的滚动体验，特别是在图库或滑块中，实现⾃定义滚动吸附点。
.scroll-container {
scroll-snap-type: y mandatory;
}
.scroll-item {
scroll-snap-align: start;
}
20.
使⽤字体变体设置进⾏可变字体样式
利⽤可变字体和font-variation-settings属性对字体的粗细、样式等进⾏精细调节。
.text {
font-family: 'YourVariableFont', sans-serif;
font-variation-settings: 'wght' 500, 'ital' 1;
}
21.
⾃定义下划线样式
使⽤border-bottom和text-decoration的组合来⾃定义链接的下划线样式。
a {
text-decoration: none;
border-bottom: 1px solid #3498db;
}
22.
隐藏⽆障碍⽂本
使⽤class sr-only来在视觉上隐藏元素，但保持其对屏幕阅读器的可访问性。
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
23.
保持元素纵横⽐
通过使⽤padding来保持元素（如图⽚或视频）的纵横⽐。
.aspect-ratio-box {
position: relative;
width: 100%;
padding-bottom: 75%; /* 根据需要调整 */
}
.aspect-ratio-box > iframe {
position: absolute;
width: 100%;
height: 100%;
}
24.
选择偶数和奇数元素
使⽤:nth-child伪类来为交替元素设置样式。
li:nth-child(even) {
background-color: #f2f2f2;
}
li:nth-child(odd) {
background-color: #e6e6e6;
}
25.
CSS计数器
使⽤counter-reset和counter-increment属性在列表中创建⾃动编号。
ol {
counter-reset: item;
}
li {
counter-increment: item;
}
li::before {
content: counter(item) ". ";
}
26.
多重背景图⽚
使⽤不同属性为元素应⽤多个背景图⽚。
.bg {
background-image: url('image1.jpg'), url('image2.jpg');
background-position: top left, bottom right;
background-repeat: no-repeat, repeat-x;
}
27.
优化⽂本流畅性的连字符
通过使⽤hyphens属性允许⾃动连字符以提⾼⽂本的可读性。
p {
hyphens: auto;
}
28.
使⽤CSS变量进⾏动态样式
利⽤CSS变量创建动态且可重⽤的样式。
:root {
--main-color: #3498db;
}
.element {
color: var(--main-color);
}
29.
键盘导航的焦点样式
改善焦点样式以提⾼键盘导航和可访问性。
:focus {
outline: 2px solid #27ae60;
}
30.
平滑渐变过渡
为渐变背景应⽤平滑过渡效果，增强视觉效果。
.gradient-box {
background: linear-gradient(45deg, #3498db, #2ecc71);
transition: background 0.5s ease;
}
.gradient-box:hover {
background: linear-gradient(45deg, #e74c3c, #f39c12);
}
31.
⽂本描边效果
为⽂本添加描边，产⽣独特的视觉效果。
h1 {
color: #3498db;
-webkit-text-stroke: 2px #2c3e50;
}
32.
纯CSS汉堡菜单
创建⼀个简单的汉堡菜单，⽆需使⽤JavaScript。
.menu-toggle {
display: none;
}
.menu-toggle:checked + nav {
display: block;
}
/* 在这⾥添加汉堡菜单图标和菜单样式 */
33.
CSS :is()选择器
使⽤:is()伪类简化复杂的选择器。
:is(h1, h2, h3) {
color: blue;
}
34.
CSS变量中的计算
在CSS变量中进⾏计算，实现动态样式。
:root {
--base-size: 16px;
--header-size: calc(var(--base-size) * 2);
}
h1 {
font-size: var(--header-size);
}
35.
attr()函数⽤于内容
使⽤attr
()函数检索和显⽰属性值。
div::before {
content: attr(data-custom-content);
}
36.
CSS遮罩效果
为图像应⽤遮罩，创造出独特的效果。
.masked-image {
mask: url(mask.svg);
mask-size: cover;
}
37.
混合模式
尝试使⽤混合模式创建有趣的⾊彩效果。
.blend-mode {
background: url(image.jpg);
mix-blend-mode: screen;
}
38.
纵横⽐属性
使⽤纵横⽐属性简化纵横⽐盒⼦的创建。
.aspect-ratio-box {
aspect-ratio: 16/9;
}
39.
shape-outside实现⽂本环绕
使⽤shape-outside属性使⽂本围绕指定形状，实现更动态的布局。
.shape-wrap {
float: left;
width: 150px;
height: 150px;
shape-outside: circle(50%);
}
40.
ch单位⽤于⼀致的尺⼨
ch单位表⽰所选字体中字符“0”的宽度，可⽤于创建⼀致且响应式的布局。
h1 {
font-size: 2ch;
}
41.
::marker伪元素
使⽤::marker伪元素为列表项标记设置样式。
li::marker {
color: blue;
}
42.
element()函数⽤于背景
使⽤element()函数动态引⽤元素作为背景。
.background {
background: element(#targetElement);
}
43.
Flexbox实现粘性底部
使⽤Flexbox创建粘性底部布局。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
44.
scroll-padding实现平滑滚动
通过调整scroll padding来改善滚动⾏为。
html {
scroll-padding: 20px;
}
45.
交互式⾼亮效果
使⽤CSS变量创建交互式⾼亮效果。
.highlight {
--highlight-color: #e74c3c;
background-image: linear-gradient(transparent 0%, var(--highlight-color) 0%);
background-size: 100% 200%;
transition: background-position 0.3s;
}
.highlight:hover {
background-position: 0 100%;
}
46.
⾃定义单选框和复选框样式
⽆需图像，样式化单选框和复选框。
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #3498db;
}
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 2px solid #e74c3c;
}
47.
textarea的resize属性
使⽤resize属性控制textarea的调整⼤⼩⾏为。
textarea {
resize: vertical;
}
48.
⽂本渐变效果
使⽤background-clip和text-fill-color属性为⽂本创建渐变效果。
.gradient-text {
background-image: linear-gradient(45deg, #3498db, #2ecc71);
background-clip: text;
color: transparent;
}
49.
对⻓单词使⽤word-break属性
使⽤word-break属性控制⻓单词或没有空格的字符串的断⾏和换⾏。
.long-words {
word-break: break-all;
}
50.
font-variation-settings⽤于可变字体
使⽤font-variation-settings属性微调可变字体样式。
.custom-font {
font-family: 'MyVariableFont';
font-variation-settings: 'wght' 600, 'ital' 1;
}
51.
混合模式⽤于创意叠加效果
使⽤混合模式为元素应⽤叠加效果，创造出有趣的视觉效果。
.overlay {
mix-blend-mode: overlay;
}
52.
为损坏的图像应⽤样式
使⽤:broken伪类为损坏的图像应⽤样式。
img:broken {
filter: grayscale(100%);
}
53.
CSS形状
使⽤CSS形状为设计创建有趣的效果。
.shape {
shape-outside: circle(50%);
}
54.
属性选择器⽤于⼦字符串匹配
使⽤*=操作符的属性选择器进⾏⼦字符串匹配。
[data-attribute*="value"] {
/* 样式 */
}
55.
backdrop-filter⽤于模糊背景
使⽤backdrop-filter为背景应⽤模糊效果，实现⽑玻璃效果。
.element {
backdrop-filter: blur(10px);
}
56.
CSS环境变量
使⽤env()函数在CSS中访问环境变量。
.element {
margin-top: env(safe-area-inset-top);
}
57.
CSS属性计数器
使⽤:nth-child选择器计算特定属性值的出现次数。
[data-category="example"]:nth-child(3) {
/* 第三次出现的样式 */
}
58.
CSS形状实现⽂本环绕
使⽤shape-outside结合polygon()函数精确地控制⽂本围绕不规则形状的布局。
.text-wrap {
shape-outside: polygon(0 0, 100% 0, 100% 100%);
}
59.
⾃定义⿏标样式
使⽤cursor属性更改⿏标样式。
.custom-cursor {
cursor: pointer;
}
60.
HSLA⽤于透明颜⾊
使⽤HSLA值表⽰透
明颜⾊，对alpha通道进⾏更精细的控制。
.transparent-bg {
background-color: hsla(120, 100%, 50%, 0.5);
}
61.
text-orientation实现纵向⽂本
使⽤text-orientation属性将⽂本垂直旋转。
.vertical-text {
text-orientation: upright;
}
62.
font-variant⽤于⼩型⼤写字⺟
使⽤font-variant属性应⽤⼩型⼤写字⺟样式。
.small-caps {
font-variant: small-caps;
}
63.
box-decoration-break⽤于背景分割
使⽤box-decoration-break属性控制跨多⾏断开的元素的背景，实现更灵活的⽂本环绕。
.split-background {
box-decoration-break: clone;
}
64.
:focus-visible⽤于特定焦点样式
仅在元素处于焦点且焦点不是由⿏标单击提供时应⽤样式。
input:focus-visible {
outline: 2px solid blue;
}
65.
text-rendering实现最佳字体呈现
通过text-rendering属性改善⽂本呈现效果。
.optimized-text {
text-rendering: optimizeLegibility;
}
66.
initial-letter⽤于⼤写字⺟
使⽤initial-letter为块级元素的第⼀个字⺟应⽤样式。
p::first-letter {
font-size: 2em;
}
67.
overscroll-behavior⽤于滚动过度
控制⽤⼾滚动超出滚动容器边界时的⾏为。
.scroll-container {
overscroll-behavior: contain;
}
68.
writing-mode实现纵向布局
使⽤writing-mode属性创建纵向布局。
.vertical-layout {
writing-mode: vertical-rl;
}
69.
::cue⽤于HTML5标题样式
使⽤::cue伪元素为HTML5字幕⽂本应⽤样式。
::cue {
color: blue;
}
70.
line-clamp截断多⾏⽂本
使⽤line-clamp属性限制元素中显⽰的⾏数。
.truncated-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
71.
scroll-snap-align
scroll-snap-align属性控制滚动容器内滚动捕捉点的对⻬⽅式，确保对滚动⾏为进⾏精确控制，提升⽤
⼾体验。
.container {
scroll-snap-type: x mandatory;
}
.item {
scroll-snap-align: center;
}
72.
overscroll-behavior
overscroll-behavior使您可以定义浏览器在滚动超出范围时的处理⽅式，从⽽避免不必要的滚动效
果，提升整体滚动体验。
.scrollable {
overscroll-behavior: contain;
}
73.
font-kerning
font-kerning允许对字符间距进⾏微调，通过调整⽂本元素中字符之间的间距，确保最佳的可读性。
p {
font-kerning: auto;
}
74.
shape-margin
与CSS形状⼀起使⽤时，shape-margin指定浮动元素形状周围的边距，可以更精确地控制⽂本环绕和
布局。
.shape {
shape-margin: 20px;
}
75.
scroll-margin
scroll-margin设置滚动容器边缘与滚动内容开始之间的边距，提升⽤⼾体验，为滚动提供缓冲空间。
.container {
scroll-margin-top: 100px;
}
76.
tab-size
tab-size属性控制⽂本区域中制表符的宽度，确保在不同⽤⼾代理中⼀致的显⽰。
pre {
tab-size: 4;
}
77.
text-align-last
text-align-last决定块级元素中最后⼀⾏⽂本的对⻬⽅式，为多⾏块⽂本提供对⻬控制。
p {
text-align-last: justify;
}
78.
text-justify
此属性控制⽂本两端对⻬的⾏为，指定是使⽤单词间还是字符间距进⾏⽂本对⻬。
p {
text-align: justify;
text-justify: inter-word;
}
79.
column-fill
column-fill决定如何在多列布局中分配内容，允许内容依次或平衡分布在列中。
.container {
column-count: 3;
column-fill: auto;
}
80.
outline-offset
outline-offset调整轮廓与元素边缘之间的空间，不影响布局，为轮廓的外观提供更细致的控制。
button {
outline: 2px solid blue;
outline-offset: 4px;
}
81.
font-variant-numeric
此属性允许精细控制数字字体渲染，启⽤特性如数字⼤⼩写和分数、序数指⽰器等。
p {
font-variant-numeric: lining-nums;
}
82.
font-optical-sizing
启⽤或禁⽤字体光学⼤⼩调整，以调整字符的间距和⽐例，实现在不同字体⼤⼩下更好的视觉和谐。
p {
font-optical-sizing: auto;
}
83.
text-decoration-thickness
精确控制⽂本装饰（如下划线、上划线和删除线）的粗细，实现精细化定制。
p {
text-decoration-thickness: 2px;
}
84.
text-decoration-skip-ink
text-decoration-skip-ink属性控制⽂本装饰（如下划线）在被墨⽔遮挡的情况下是否继续绘制，提升
可读性。
a {
text-decoration-skip-ink: auto;
}
85.
word-spacing
word-spacing属性控制字词间距，调整⽂本的紧凑度和可读性。
p {
word-spacing: 2px;
}
86.
hyphenation
通过调整断字点和断字⾏为，提⾼⽂本在窄列中的美观度和可读性。
p {
hyphens: auto;
}
87.
background-blend-mode
background-blend-mode属性允许背景图像与其下⽅的背景颜⾊进⾏混合，产⽣出独特的视觉效果。
.element {
background-image: url('image.jpg');
background-color: #3498db;
background-blend-mode: multiply;
}
88.
text-decoration-color
text-decoration-color属性控制⽂本装饰的颜⾊，为链接和装饰⽂本提供更灵活的样式。
a {
text-decoration: underline;
text-decoration-color: red;
}
89.
overflow-anchor
overflow-anchor属性指定了在容器的滚动范围内滚动时哪些内容应保持可⻅，提升⽤⼾体验。
.container {
overflow-anchor: none;
}
90.
contain-intrinsic-size
contain-intrinsic-size属性定义了内联⼤⼩计算函数的⼤⼩，实现更精确的布局控制。
img {
contain-intrinsic-size: 200px 300px;
}
91.
line-gap
line-gap属性定义了元素的⾏间距，可以为⽂字和其他⾏内元素提供更⼤的空间。
p {
line-gap: 1.5;
}
92.
text-underline-offset
text-underline-offset属性控制⽂本下划线相对于基线的垂直偏移量，实现更加精确的下划线定位。
a {
text-decoration: underline;
text-underline-offset: 3px;
}
93.
text-decoration-line
text-decoration-line属性指定要绘制的装饰线的类型，可⽤于单独控制上划线、下划线、删除线等。
a {
text-decoration-line: underline overline;
}
94.
text-emphasis
text-emphasis属性为⽂本设置强调标志，⽤于提⾼关键字的可读性。
em {
text-emphasis: filled circle;
}
95.
text-orientation
text-orientation属性控制⽂本的⽅向，适⽤于纵向⽂本和⽇⽂排版等情况。
.vertical-text {
text-orientation: sideways-right;
}
96.
background-origin
background-origin属性确定背景图⽚的起始位置，影响背景图⽚与边框的相对位置。
.element {
background-image: url('image.jpg');
background-origin: content-box;
}
97.
counter-set
counter-set属性在使⽤counter-reset创建的计数器值基础上，显式设置⼀个新的值。
ol {
counter-set: section 1;
}
98.
hanging-punctuation
hanging-punctuation属性控制标点符号是否在⾏框之外悬挂，以提⾼排版的美观度和可读性。
p {
hanging-punctuation: last allow-end;
}
99.
line-break
line-break属性控制⽂本换⾏⾏为，确保在指定的断点处进⾏断⾏。
p {
line-break: anywhere;
}
100.
text-justify
text-justify属性指定如何分配额外的空间，以便充分利⽤容器的宽度。
p {
text-align: justify;
text-justify: inter-word;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
