30个 CSS 技巧汇总

lingllllove

于 2024-12-19 20:39:36 发布

阅读量696

点赞数 22

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.csdn.net/lingllllove/article/details/144594367

01. 网站平滑滚动

在<html>元素中添加scroll-behavior: smooth，以实现整个页面的平滑滚动。

html{    scroll-behavior: smooth;  }

02.链接的属性选择器

此选择器的目标是具有以“https”开头的 href 属性的链接。

a[href^="https"]{    color: blue;  }

03.〜合并兄弟姐妹

选择 <h2> 后面的所有兄弟元素 <p> 元素。

h2 ~ p{    color: blue;  }

04. :not() 伪类

该选择器将样式应用于不具有“特殊”类的列表项。

li:not(.special){        font-stlye: italic;    }

05. 用于响应式排版的视口单位

使用视口单位（vw、vh、vmin、vmax）可以使字体大小响应视口大小。

h1{    font-size: 5vw;  }

06. :empty 表示空元素

此选择器定位空的 <p> 元素并隐藏它们。

p:empty{    display: none;  }

07.自定义属性（变量）

可以定义和使用自定义属性，以更轻松地设置主题和维护。

:root{    --main-color: #3498db;  }
  h1{    color: var(--main-color);  }

08.图像控制的Object-fit属性

object-fit 控制如何调整替换元素（如 <img>）的内容大小。

img{    width: 100px;     height: 100px;    object-fit: cover;  }

09. 简化布局的网格

CSS 网格提供了一种以更简单的方式创建布局的强大方法。

.container{    display: grid;    grid-tempalte-columns: 1fr 2fr 1fr; }

10. :focus-in 伪类

如果该元素包含任何具有 :focus 的子元素，则 :focus-within 会选择该元素。

form:focus-within{    box-shadow: 0 0 5px rgba(0, 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.渐变边框

使用background-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.通过字体显示交换实现高效字体加载

使用字体显示：交换；属性可通过在加载自定义字体时显示后备字体来提高 Web 字体的性能。

@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.隐藏的辅助文本

使用类 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. 纵横比框

使用填充技巧来保持图像或视频等元素的宽高比。

.aspect-ratio-box {    position: relative;    width: 100%;    padding-bottom: 75%; /* Adjust as needed */}
.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计数器

使用计数器重置和计数器增量属性在列表中创建自动编号。

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);}