想要成为CSS大师？这些技巧是你必须知道的！-编程知识

前言

1. 改变 input 自动填充的背景颜色

这段 CSS 代码是用来控制浏览器自动填充表单时的样式。当浏览器自动填充表单时，会出现一个预览框，这个预览框的样式可以通过 CSS 来控制。其中 input:-internal-autofill-previewed 和 input:-internal-autofill-selected 是 CSS 选择器，用来选择浏览器自动填充表单时的预览框和已选中的表单项。-webkit-text-fill-color 是一个 CSS 属性，用来设置文本颜色。在这里，它被设置为黑色，以覆盖浏览器自动填充表单时默认的文本颜色。另外，transition 是 CSS 属性，用来设置 CSS 属性的过渡效果。在这里，它被用来设置背景颜色的过渡效果，当背景颜色发生变化时，过渡效果会在 0.5 秒内完成，这样可以使过渡效果更加平滑。

input:-internal-autofill-previewed,
input:-internal-autofill-selected {-webkit-text-fill-color: black;transition: background-color 1000s ease-out 0.5s;
}

在这里插入图片描述

2. 首字母操作

:first-letter 伪元素用于选择元素的第一个字母，并对其应用样式。它允许你对文本的首字母进行特殊的样式处理，比如改变字体大小、颜色、行高等。使用 :first-letter 伪元素时，你可以为选中的首字母应用各种样式属性，例如 font-size、color、line-height、text-transform 等。这些样式属性将只应用于首字母，而不会影响其他文本。

<!DOCTYPE html>
<html><head><style>p:first-letter {font-size: 200%;color: rgb(37, 109, 243);}</style>
</head><body><p>Stop thinking too much, it's alright not to know all the answers.</p>
</body></html>

在这里插入图片描述

3. 控制文本大小写转换

text-transform 是一个 CSS 属性，用于控制文本的大小写转换。它可以改变文本的大小写形式，包括转换为大写、小写、首字母大写或不进行任何转换。

属性	描述
none	默认值，文本不进行任何转换，保持原样。
uppercase	将文本转换为大写形式。
capitalize	将每个单词的首字母转换为大写形式。
lowercase	将文本转换为小写形式。

<!DOCTYPE html>
<html><head><style>p {font-size: 30px;color: rgb(37, 109, 243);}p:nth-child(1) {text-transform: uppercase;}p:nth-child(2) {text-transform: capitalize;}p:nth-child(3) {text-transform: lowercase;}</style>
</head><body><p>Stop thinking too much, it's alright not to know all the answers.</p><p>Stop thinking too much, it's alright not to know all the answers.</p><p>Stop thinking too much, it's alright not to know all the answers.</p>
</body></html>

在这里插入图片描述

4. :where() 简化代码

where() 是一个 CSS 伪类函数，用于选择匹配指定条件的元素。它可以在选择器中使用，以便更精确地选择元素。where() 函数接受一个条件表达式作为参数，该表达式描述了要选择的元素的条件。如果元素满足条件，则将应用选择器的规则。where() 函数是一个比较新的 CSS 功能，目前还没有得到广泛支持。因此，在使用时需要谨慎考虑浏览器的兼容性。

<!DOCTYPE html>
<html><head><style>.box :where(div, .title, #only) {color: cadetblue;}</style>
</head><body><div class="box"><div>Some text</div> <!-- 这个div元素将应用样式 --><h1 class="title">Title</h1> <!-- 这个具有.title类的元素将应用样式 --><p id="only">Article content</p> <!-- 这个具有#only ID的元素将应用样式 --><span>Other text</span> <!-- 这个span元素不满足选择器的条件，不会应用样式 --></div></body></html>

在这里插入图片描述

5. 透明图片阴影

box-shadow 和 filter: drop-shadow 属性都可以用于为元素添加阴影和投影效果，但有一些区别：

box-shadow 属性是一个独立的属性，可以直接应用于元素，而 filter: drop-shadow 属性是 CSS 滤镜的一部分，需要使用 filter 属性来应用；
box-shadow 属性可以同时指定水平和垂直偏移量，模糊半径和扩展半径，而 filter: drop-shadow 属性只能指定水平和垂直偏移量以及模糊半径；
box-shadow 属性可以在元素的边界之外创建阴影，而 filter: drop-shadow 属性只会在元素内部创建投影。

<!DOCTYPE html>
<html><head><style>.boxShadow {box-shadow: 2px 4px 8px #3723a1;}.dropShadow {filter: drop-shadow(2px 4px 8px #3723a1);}</style>
</head><body><div><img class="boxShadow" src="./assets/z.png" alt=""><img class="dropShadow" src="./assets/z.png" alt=""></div>
</body></html>

在这里插入图片描述

6. 自定义光标

cursor 属性用于指定鼠标指针在元素上的样式。通过设置 cursor 属性，可以改变鼠标指针的外观，以提供更好的用户体验。

属性	描述
auto	浏览器自动选择合适的鼠标指针样式。
default	默认的鼠标指针样式，通常是一个箭头。
pointer	表示链接的鼠标指针样式，通常是一个手指。
text	表示可编辑文本的鼠标指针样式，通常是一个竖线。
move	表示可移动的鼠标指针样式，通常是一个十字箭头。
wait	表示等待的鼠标指针样式，通常是一个钟表或旋转的圆圈。
help	表示帮助的鼠标指针样式，通常是一个问号。
not-allowed	表示禁止操作的鼠标指针样式，通常是一个圆圈内有一个斜线。

<!DOCTYPE html>
<html><head><style>html {cursor: url('./assets/gb.png'), auto;}</style>
</head><body><div class="box">Stop thinking too much, it's alright not to know all the answers.</div>
</body></html>

在这里插入图片描述

7. 文字描边

-webkit-text-stroke 是一个 CSS 属性，用于在 Webkit 浏览器（如 Chrome 和 Safari）中设置文字的描边效果。它可以让文字具有边框样式，类似于文字的描边效果

<!DOCTYPE html>
<html><head><style>.box {color: transparent;-webkit-text-stroke: 1px cadetblue;}</style>
</head><body><div class="box">Stop thinking too much, it's alright not to know all the answers.</div>
</body></html>

在这里插入图片描述

8. 渐变阴影

代码中使用了 CSS 变量 --gradual 来定义渐变背景，颜色从 chartreuse 到 cornflowerblue。通过 .box 类选择器，将渐变背景应用于盒子。使用 .box::after 伪元素选择器，创建了一个与盒子相同大小的伪元素，并为其应用了相同的渐变背景和边框半径。通过模糊滤镜和位移缩放，给伪元素添加了模糊效果。最后，将伪元素的 z-index 设置为 -1，使其位于盒子内容的下方。

<!DOCTYPE html>
<html><head><style>:root {--gradual: linear-gradient(to bottom right, chartreuse, cornflowerblue);}.box {height: 180px;width: 180px;background-image: var(--gradual);border-radius: 10px;position: relative;}.box::after {content: "";position: absolute;inset: 0;background-image: var(--gradual);border-radius: inherit;filter: blur(25px) brightness(1.5);transform: translateY(15%) scale(0.95);z-index: -1;}</style>
</head><body><div class="box"></div>
</body></html>

在这里插入图片描述

9. 控制单词间距

word-spacing 是一个 CSS 属性，用于控制文本中单词之间的间距。它可以应用于任何具有文本内容的 HTML 元素。具体来说，word-spacing 属性定义了单词之间的额外间距，可以通过指定一个长度值或百分比值来设置。默认情况下，单词之间没有额外的间距。

<!DOCTYPE html>
<html><head><style>p {word-spacing: 20px;}</style>
</head><body><p>This is a sample paragraph with word-spacing applied.</p>
</body></html>

在这里插入图片描述

10. 图像填充文本

background-size 属性用于设置背景图像的大小。将值设置为 cover 表示图像将被缩放以填充整个文本区域，保持其纵横比。background-repeat 属性用于设置图像的重复方式。将值设置为 repeat 表示图像将在文本区域内重复平铺，以填充整个区域。通过将这两个属性添加到包含文本的元素的 CSS 样式中，你可以实现图像内容的均匀填充效果。

<!DOCTYPE html>
<html><head><style>.text-image {font-size: 50px;font-weight: bold;background-image: url('./assets/fgh.png');-webkit-background-clip: text;background-clip: text;color: transparent;}</style>
</head><body><h1 class="text-image">Hello, World!</h1>
</body></html>

在这里插入图片描述

11. :paused 伪类

在 CSS 中，:paused 伪类用于选择处于暂停状态的动画或过渡效果。它可以与 animation 和 transition 属性一起使用。当动画或过渡效果被暂停时，元素会被匹配到 :paused 伪类。这使得你可以为暂停状态下的元素应用特定的样式。

<!DOCTYPE html>
<html><head><style>.box {width: 200px;height: 200px;background-color: darkcyan;animation: myAnimation 3s infinite;}.box:paused {background-color: blue;}@keyframes myAnimation {0% {transform: scale(0.5);}50% {transform: scale(1);}100% {transform: scale(0.5);}}</style>
</head><body><div class="box"></div><button onclick="pauseAnimation()">暂停</button><button onclick="resumeAnimation()">恢复</button><script>function pauseAnimation() {var box = document.querySelector('.box');box.style.animationPlayState = 'paused';}function resumeAnimation() {var box = document.querySelector('.box');box.style.animationPlayState = 'running';}</script>
</body></html>

在这里插入图片描述

12. 强调文本

text-emphasis 属性是 CSS3 中新增的一个文本强调效果属性，用于为文本添加各种强调效果，包括点、圆圈、双线、波浪线等。

<!DOCTYPE html>
<html><head><style>p {width: 100px;text-align: center;border-radius: 4px;padding: 10px;background: rgb(239, 240, 224);text-emphasis: "⏰";}</style>
</head><body><p>文本强调</p>
</body></html>

在这里插入图片描述

13. 指定文本的书写模式

writing-mode 是一个 CSS 属性，用于指定文本的书写模式。它决定了文本是水平书写还是垂直书写，以及文本的方向。

属性	描述
horizontal-tb	默认值，表示水平书写模式，从左到右，从上到下。
vertical-rl	表示垂直书写模式，从右到左，从上到下。
vertical-lr	表示垂直书写模式，从左到右，从上到下。
sideways-rl	表示垂直书写模式，从上到下，从右到左。
sideways-lr	表示垂直书写模式，从上到下，从左到右。

通过设置不同的 writing-mode 值，可以实现不同的文本布局效果。例如，如果将 writing-mode 设置为 vertical-rl，则文本会以垂直方向从右到左书写。

<!DOCTYPE html>
<html><head><style>p {writing-mode: vertical-rl;}</style>
</head><body><p>这是一个使用垂直书写模式的段落。</p>
</body></html>

在这里插入图片描述

14. 悬停效果

:hover 是 CSS 中的一个伪类，用于选择元素在鼠标悬停时的状态。当鼠标悬停在一个元素上时，你可以通过应用 :hover 伪类来改变该元素的样式。

<!DOCTYPE html>
<html><head><style>.box {width: 200px;height: 200px;background-color: coral;transition: transform 0.3s ease;}.box:hover {transform: scale(1.2);}</style>
</head><body><div class="box"></div>
</body></html>

在这里插入图片描述

15. 剪切元素

clip-path 是一个 CSS 属性，用于剪切元素的可见区域，以实现各种形状的裁剪效果。它可以通过不同的值来定义剪切路径，包括基本形状、SVG 路径和 CSS 函数。

<!DOCTYPE html>
<html><head><style>.clipped {width: 300px;height: 200px;background-color: cadetblue;clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);}</style>
</head><body><div class="clipped"></div>
</body></html>

在这里插入图片描述

16. 检测属性是否支持

CSS3 引入了 @supports 规则，它允许我们在样式表中根据属性的支持情况来应用不同的样式。

<style>/* 应用于支持 flexbox 布局的浏览器 */@supports (display: flex) {.container {display: flex;}}/* 应用于不支持 flexbox 布局的浏览器 */@supports not (display: flex) {.container {display: block;}}
</style>

在上面的示例中，如果浏览器支持 display: flex，则 .container 元素将使用 flex 布局；如果不支持，将使用 block 布局。@supports 规则还支持逻辑运算符，例如 and、or 和 not，以及多个属性和属性值的组合。这使得我们可以更精确地检测多个属性的支持情况。需要注意的是，@supports 规则在某些旧版本的浏览器中可能不被支持。因此，在使用 @supports 规则时，建议提供备用样式以确保在不支持规则的浏览器中也能正常显示。

17. CSS 嵌套

在 CSS 中，嵌套是一种组织和编写样式的技术，它允许我们在选择器中嵌套其他选择器，以便更清晰地描述 HTML 结构的层次关系。通过嵌套，我们可以减少重复的代码，并更方便地管理样式。

<!DOCTYPE html>
<html><head><style>.navbar {background-color: darkcyan;padding: 10px;border-radius: 4px;width: 100px;text-align: center;.navList {list-style: none;margin: 0;padding: 0;li {display: inline-block;margin-right: 10px;a {color: #fff;text-decoration: none;&:hover {text-decoration: underline;}}}}}</style>
</head><body><nav class="navbar"><ul class="navList"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav>
</body></html>

在这里插入图片描述

18. clamp() 函数

clamp() 函数是 CSS 中的一个函数，用于限制一个值在指定的范围内。它接受三个参数：一个要限制的值，一个最小值和一个最大值。函数的返回值是在最小值和最大值之间的值。

clamp(<min>, <value>, <max>)

各属性值含义：

<min>：表示允许的最小值；
<value>：表示要限制的值；
<max>：表示允许的最大值。

clamp() 函数的工作原理如下：

如果 <value> 小于 <min>，则返回 <min>；
如果 <value> 大于，则返回 <max>；
否则，返回 <value>。

<!DOCTYPE html>
<html><head><style>.box {width: clamp(100px, 50px, 400px);height: clamp(100px, 20px, 400px);background-color: gold;}</style>
</head><body><div class="box"></div>
</body></html>

在这里插入图片描述

19. 图文环绕

shape-outside 是一个 CSS 属性，用于定义一个元素的形状，以便其他元素可以环绕它。这个属性通常与 float 属性一起使用，以实现图片或其他元素的文字环绕效果。

<!DOCTYPE html>
<html><head><style>.container {width: 100%;overflow: hidden;}.floatLeft {float: left;margin-right: 20px;margin-bottom: 20px;shape-outside: circle(50%);}</style>
</head><body><div class="container"><img src="./assets/yhn.png" alt="Your Image" class="floatLeft"><p>When you are young, you may want several love experiences. But as timegoes on, you will realize that ifyou really love someone, the wholelife will not be enough. You need time to know, to forgive and to love.All thisneeds a very big mind.</p></div></body></html>

在这里插入图片描述

20. 背景混合模式

当使用 CSS 实现背景混合模式时，你可以使用 background-blend-mode 属性来控制背景图像和背景颜色之间的混合效果。

<!DOCTYPE html>
<html><head><style>.element {display: inline-block;width: 300px;height: 300px;background-image: url('./assets/img.jpg');}.mixture {background-color: #ff0000;background-blend-mode: multiply;}</style>
</head><body><div class="element"></div><div class="element mixture"></div>
</body></html>

在这里插入图片描述

21. 调整滚动条默认样式

当需要调整滚动条样式时，可以使用 CSS 来实现。

首先，选择要调整样式的滚动条。可以使用以下 CSS 选择器来选择不同类型的滚动条：

滚动条：::-webkit-scrollbar
滚动条轨道：::-webkit-scrollbar-track
滚动条滑块：::-webkit-scrollbar-thumb
滚动条角落：::-webkit-scrollbar-corner
滚动条按钮：::-webkit-scrollbar-button

接下来，使用 CSS 属性来调整滚动条的样式。以下是一些常用的属性：

width：滚动条的宽度
height：滚动条的高度
background-color：滚动条的背景颜色
border：滚动条的边框样式
border-radius：滚动条的边框圆角
box-shadow：滚动条的阴影效果
color：滚动条上文本的颜色
cursor：鼠标悬停在滚动条上时的光标样式

<!DOCTYPE html>
<html><head><style>.scroll {width: 500px;height: 150px;border: 1px solid #ddd;padding: 10px;overflow: auto;}/* 滚动条 */::-webkit-scrollbar {width: 10px;background-color: #f1f1f1;}/* 滚动条轨道 */::-webkit-scrollbar-track {background-color: #f1f1f1;}/* 滚动条滑块 */::-webkit-scrollbar-thumb {background-color: #888;border-radius: 5px;}/* 滚动条角落 */::-webkit-scrollbar-corner {background-color: #f1f1f1;}/* 滚动条按钮 */::-webkit-scrollbar-button {display: none;}</style>
</head><body><div class="scroll">内容......</div>
</body></html>

在这里插入图片描述

22. 卡券效果

要实现卡券效果，可以使用 CSS 来创建一个具有特殊样式的卡片。

<!DOCTYPE html>
<html><head><style>.coupon {width: 300px;height: 100px;margin: 50px auto;text-align: center;position: relative;background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}</style>
</head><body><p class="coupon"></p>
</body></html>

在这里插入图片描述

23. 表格边框合并

border-collapse 是 CSS 中用于控制表格边框合并方式的属性。它有两个值：

separate（默认值）：这是 border-collapse 的初始值。在此模式下，相邻单元格的边框会分开显示，不会合并。每个单元格都有自己的边框；
collapse：在这种模式下，相邻单元格的边框会合并为一个单一的边框。这样可以创建更紧凑和一致的表格外观。

<!DOCTYPE html>
<html><head><style>table {width: 400px;height: 80px;border: 1px solid #ccc;}td {border: 1px solid #ccc;}table:nth-child(2) {border-collapse: collapse;}</style>
</head><body><table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table><table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table>
</body></html>

在这里插入图片描述

24. 隐藏文本

通过一些 CSS 方法可以实现将一些文本隐藏。

<!DOCTYPE html>
<html><head><style>/* 完全隐藏元素，包括其文本内容和占用的空间。元素在页面上不可见，也不会占据布局空间。 */.displayMed {display: none;}/* 隐藏元素的内容，但仍然保留其占用的空间。元素在页面上不可见，但仍然占据布局空间。 */.visibilityMed {visibility: hidden;}/* 将元素的位置设置为绝对定位，并将其左侧移出屏幕，可以隐藏元素的文本内容。但是，这种方法可能会影响元素的布局，因为元素的位置可能会发生变化。 */.positionMed {position: absolute;left: -9999px;}/* 将元素的字体大小设置为0，可以隐藏元素的文本内容。但是，这种方法可能会影响元素的子元素，因为子元素的字体大小也会被设置为0。 */.fontMed {font-size: 0;}/* 将元素的透明度设置为0，可以隐藏元素的文本内容。但是，这种方法会使整个元素变为透明，包括其背景和其他样式。 */.opacityMed {opacity: 0;}</style>
</head><body><div><span>标题1：</span><span class="displayMed">内容1</span></div><div><span>标题2：</span><span class="visibilityMed">内容2</span></div><div><span>标题3：</span><span class="positionMed">内容3</span></div><div><span>标题4：</span><span class="fontMed">内容4</span></div><div><span>标题5：</span><span class="opacityMed">内容5</span></div>
</body></html>

在这里插入图片描述

25. 文字溢出显示省略号

要在文本溢出时显示省略号，可以使用 CSS 的 text-overflow 属性和 overflow 属性的配合。

<!DOCTYPE html>
<html><head><style>.overflow {width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}</style>
</head><body><div class="overflow">This is a long text that will be truncated with an ellipsis when it overflows.</div>
</body></html>

在这里插入图片描述

26. 设置 placeholder 样式

当我们在 HTML 中使用 placeholder 属性时，可以通过 CSS 来自定义其样式。

<!DOCTYPE html>
<html><head><style>input::placeholder {color: red;font-size: 22px;}</style>
</head><body><input type="text" placeholder="请输入文字">
</body></html>

在这里插入图片描述

27. 立体字效果

实现立体字的效果，可以使用 CSS 的文本阴影和透明度属性

<!DOCTYPE html>
<html><head><style>h1 {text-shadow: 2px 2px 4px rgba(212, 15, 15, 0.7);color: white;opacity: 0.8;}</style>
</head><body><h1>立体字效果</h1>
</body></html>

在这里插入图片描述

28. 更改 input 光标颜色

caret-color 是一个 CSS 属性，用于设置文本输入框（如 input、textarea 等）中光标的颜色。

<!DOCTYPE html>
<html><head><style>input {caret-color: red;}</style>
</head><body><input type="text">
</body></html>

在这里插入图片描述

29. 鼠标事件失效

pointer-events: none 和 cursor: default 都是 CSS 属性，用于控制元素的交互行为和鼠标指针的样式。

pointer-events: none 用于禁用元素的鼠标事件，使其无法响应鼠标的交互操作。具体来说，当一个元素的 pointer-events 属性设置为 none 时，该元素及其子元素将不会接收到鼠标事件，包括鼠标点击、鼠标移动等。这个属性通常用于创建可穿透的元素，使其下方的元素能够接收到鼠标事件。

cursor: default 用于设置鼠标指针在元素上的样式为默认样式。默认样式通常是一个箭头指针，表示元素没有特定的交互行为。当鼠标悬停在一个元素上时，如果该元素的 cursor 属性设置为 default，鼠标指针将显示为箭头。

<!DOCTYPE html>
<html><head><style>.disabled-button {pointer-events: none;cursor: default;background-color: gray;color: white;padding: 10px 20px;border: none;border-radius: 4px;}</style><script>function handleClick() {console.log('按钮被点击了！')}</script>
</head><body><button class="disabled-button" onclick="handleClick()">禁用按钮</button>
</body></html>

在这里插入图片描述

30. 图片自适应

当使用 object-fit: cover 属性时，可以实现图片的自适应效果，使其填充其容器，并保持其原始比例。

<!DOCTYPE html>
<html><head><style>.image {width: 300px;height: 200px;overflow: hidden;}.image img {width: 100%;height: 100%;object-fit: cover;}</style>
</head><body><div class="image"><img src="./assets/img.jpg" alt="Your Image"></div>
</body></html>