每个开发人员都应该知道的 22 个 CSS 技巧和窍门

2025-05-24

每个开发人员都应该知道的 22 个 CSS 技巧和窍门

🚨🚨 注意：本文分享的所有技巧和窍门均来自 GitHub 代码库“css tips tricks”。这是一个专为开发者打造的专业 CSS 技巧和窍门合集。请查看该代码库，如果觉得有用，请点个星🌟

1. 文档布局

仅使用两行 CSS 即可创建响应式文档样式的布局。



.parent{
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}
Enter fullscreen mode Exit fullscreen mode

布局

2. 自定义游标

查看 github 存储库css 技巧以了解更多信息。



html{
  cursor:url('no.png'), auto;
}
Enter fullscreen mode Exit fullscreen mode

带有自定义光标的图像

3.用图片填充文本



h1{
  background-image: url('images/flower.jpg');
  background-clip: text;
  color: transparent;
  background-color: white;
}
Enter fullscreen mode Exit fullscreen mode

Air Max

注意：使用此技术时务必指定background-color，因为如果图像由于某种原因无法加载，这将用作后备值。

4. 为文本添加描边

text-stroke使用属性为文本添加描边或轮廓，使文本更清晰可见。



/* 🎨 Apply a 5px wide crimson text stroke to h1 elements */

h1 {
  -webkit-text-stroke: 5px crimson;
  text-stroke: 5px crimson;
}
Enter fullscreen mode Exit fullscreen mode

NETLIFY

5.暂停伪类

:paused在暂停状态下使用选择器来设置媒体元素的样式，同样:paused我们也有:playing。



/* 📢 currently, only supported in Safari */

video:paused {
  opacity: 0.6;
}
Enter fullscreen mode Exit fullscreen mode

河边的棕榈树

6.强调文本

使用text-emphasis属性将强调标记应用于文本元素。您可以指定任何字符串（包括表情符号）作为其值。



h1 {
  text-emphasis: "⏰";
}
Enter fullscreen mode Exit fullscreen mode

时间是良药

7. 首字下沉样式

避免不必要的跨度并使用伪元素来设置内容样式，同样first-letter，我们也有first-line伪元素。



 h1::first-letter{
  font-size: 2rem;
  color:#ff8A00;
}
Enter fullscreen mode Exit fullscreen mode

Gitpod.io

8. 变量的后备值



/* 🎨 crimson color will be applied as var(--black) is not defined */

:root {
  --orange: orange;
  --coral: coral;
}

h1 {
  color: var(--black, crimson);
}
Enter fullscreen mode Exit fullscreen mode

深红色的文字

9.改变写作模式

您可以使用书写模式属性来指定文本在您的网站上的布局方式，即垂直或水平。



<h1>Cakes & Bakes</h1>
Enter fullscreen mode Exit fullscreen mode 


/* 💡 specifies the text layout direction to sideways-lr  */

h1 {
  writing-mode: sideways-lr;
}
Enter fullscreen mode Exit fullscreen mode

文本开始于

10.彩虹动画

为元素创建连续循环的彩色动画，以吸引用户注意力。阅读CSS 技巧库，了解何时使用prefer-reduced-motion媒体功能。



button{
  animation: rainbow-animation 200ms linear infinite;
}

@keyframes rainbow-animation {
  to{
    filter: hue-rotate(0deg);
  }
 from{
    filter: hue-rotate(360deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

立即购买按钮不断改变颜色

11. 掌握 Web 开发

订阅我们的YouTube 频道，提升您的 Web 开发技能。我们最近的一个视频系列讲解了如何创建以下开源作品集模板。

伊蒙

12. 悬停时缩放



/* 📷 Define the height and width of the image container & hide overflow */

.img-container {
  height: 250px; width: 250px; overflow: hidden;
 }

/* 🖼️ Make the image inside the container fill the container */

.img-container img {
  height: 100%; width: 100%; object-fit: cover; 
  transition: transform 200m ease-in;
 }

 img:hover{
  transform: scale(1.2);
 }
Enter fullscreen mode Exit fullscreen mode

深红色的购物袋放在灰色瓷砖上

13. 属性选择器

使用属性选择器根据属性选择 HTML 元素。



<a href="">HTML</a>
<a>CSS</a>
<a href="">JavaScript</a>
Enter fullscreen mode Exit fullscreen mode 


/* 🔗 targets all a elements that have a href attribute */

a[href] {
  color: crimson;
}
Enter fullscreen mode Exit fullscreen mode

HTML CSS JavaScript

14. 剪切元素

使用该clip-path属性来创建有趣的视觉效果，例如将元素剪切为三角形或六边形等自定义形状。



div {
  height: 150px;
  width: 150px;
  background-color: crimson;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
Enter fullscreen mode Exit fullscreen mode

三角形

15. 检测属性支持

使用 CSS@support rule直接在 CSS 中检测 CSS 功能的支持情况。查看CSS 技巧库，了解更多关于功能查询的信息。




@supports (accent-color: #74992e) {
/* code that will run if the property is supported */
  blockquote {
    color: crimson;
  }

}
Enter fullscreen mode Exit fullscreen mode

永远不要违背你的诺言。（哈兹拉特·阿里 AS）

16. CSS嵌套

CSS 工作组一直在研究如何在 CSS 中添加嵌套功能。有了嵌套功能，您将能够编写更直观、更有条理、更高效的 CSS。



<header class="header">
  <p class="text">Lorem ipsum, dolor</p>
</header>
Enter fullscreen mode Exit fullscreen mode 


/* 🎉 You can try CSS nesting now in Safari Technology Preview*/

.header{

  background-color: salmon;

  .text{
    font-size: 18px;
  }

}
Enter fullscreen mode Exit fullscreen mode

17. Clamp 函数

使用该clamp()功能实现响应式和流畅的排版。



/* Syntax: clamp(minimum, preferred, maximum) */
h1{
  font-size: clamp(2.25rem,6vw,4rem);
}
Enter fullscreen mode Exit fullscreen mode

gif字体大小根据屏幕尺寸变化

18. 样式可选字段

您可以使用伪类来设置没有必需属性的表单字段（如输入、选择和文本区域）:optional。



/* Selects  all optional form fields on the page */

*:optional{
  background-color: green;
}
Enter fullscreen mode Exit fullscreen mode

19. 词间距属性

使用word-spacing属性指定单词之间的空格的长度。



p {
  word-spacing: 1.245rem;
}
Enter fullscreen mode Exit fullscreen mode

20.创建渐变阴影

这就是您可以创建渐变阴影以获得独特的用户体验的方法。



:root{
  --gradient: linear-gradient(to bottom right, crimson, coral);
}

div {
  height: 200px;
  width: 200px;
  background-image: var(--gradient);
  border-radius: 1rem;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gradient);
  border-radius: inherit;
  filter: blur(25px) brightness(1.5);
  transform: translateY(15%) scale(0.95);
  z-index: -1;
}
Enter fullscreen mode Exit fullscreen mode

带有渐变阴影的框

21. 更改标题的侧面

使用该caption-side属性将表格标题（表格标题）放置在表格的指定一侧。

将表格标题从上到下更改

22. 创建文本列

使用列属性为文本元素制作漂亮的列布局。



/* 🏛️ divide the content of the "p" element into 3 columns  */

p{
  column-count: 3;
  column-gap: 4.45rem;          
  column-rule: 2px dotted crimson;
}
Enter fullscreen mode Exit fullscreen mode

CSS 技巧和窍门诗歌

希望你喜欢这篇文章。请查看 GitHub 代码库“css tips tricks”，了解更多专业的 CSS 技巧和窍门。别忘了给代码库点个 Star⭐，这样可以帮助其他人找到这个代码库。

您可以通过关注我的GitHub 帐户来表示支持。谢谢，祝您编程愉快 ❤️

文章来源：https://dev.to/devsyedmohsin/22-useful-css-tips-and-tricks-every-developer-should-know-13c6
Devto 翻译
PREV
CSS 技巧和窍门。
NEXT
Golang for Web（第一部分）：使用 Golang 和 Fiber 构建您的第一个 REST API