返回

工作中 49 个容易遗忘的 CSS 样式

前端


<p>在日常工作中，CSS 样式是我们塑造网站外观和感觉的关键工具。然而，随着时间的推移，我们经常会忘记一些鲜为人知但非常有用的样式。本文整理了一份 49 个在工作中容易遗忘的 CSS 样式清单，涵盖了从文本格式到布局和交互的各个方面，帮助你提升 CSS 技能并打造出更精致的网站。</p>



<p><b>文本格式</b></p>
<ul>
    <li><b>text-overflow: ellipsis;</b> - 使超出容器的文本显示省略号。</li>
    <li><b>word-break: break-all;</b> - 允许单词在任意位置自动换行。</li>
    <li><b>text-decoration: line-through;</b> - 为文本添加删除线。</li>
    <li><b>letter-spacing: 0.1em;</b> - 增加字母之间的间距。</li>
    <li><b>text-transform: uppercase;</b> - 将文本转换为大写。</li>
</ul>

<p><b>布局</b></p>
<ul>
    <li><b>flex-wrap: wrap;</b> - 使 flexbox 项目在超出容器宽度时自动换行。</li>
    <li><b>grid-gap: 1em;</b> - 在网格项目之间添加间距。</li>
    <li><b>max-width: 80%;</b> - 限制元素的最大宽度，使其保持在容器的 80% 以内。</li>
    <li><b>min-height: 50vh;</b> - 设置元素的最小高度，使其至少占据视口高度的 50%。</li>
    <li><b>z-index: 999;</b> - 控制元素在页面上的层叠顺序，将其放置在所有其他元素的前面。</li>
</ul>

<p><b>交互</b></p>
<ul>
    <li><b>cursor: pointer;</b> - 将鼠标悬停在元素上时显示指针光标。</li>
    <li><b>user-select: none;</b> - 禁用元素的文本选择。</li>
    <li><b>opacity: 0.5;</b> - 设置元素的透明度为 50%。</li>
    <li><b>transition: all 0.5s ease-in-out;</b> - 为元素添加平滑的过渡效果。</li>
    <li><b>animation: spin infinite 2s linear;</b> - 为元素添加无限旋转动画。</li>
</ul>

<p><b>其他</b></p>
<ul>
    <li><b>box-sizing: border-box;</b> - 包括元素的边框和填充在元素的总宽度/高度中。</li>
    <li><b>object-fit: contain;</b> - 使图像在容器中缩放，同时保持其原始宽高比。</li>
    <li><b>background-blend-mode: multiply;</b> - 混合背景图像和元素背景颜色，创建独特的视觉效果。</li>
    <li><b>filter: blur(5px);</b> - 为元素添加模糊效果。</li>
    <li><b>mask-image: url(mask.png);</b> - 使用图像作为元素的遮罩。</li>
</ul>

<p>在工作中有效地利用这些 CSS 样式，可以大大提升你的效率和网站的整体外观。花时间探索这些样式并将其融入你的项目中，为你的用户打造更令人印象深刻和用户友好的体验。</p>