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

ctf_0226

已于 2025-03-10 10:19:56 修改

阅读量827

点赞数 25

CC 4.0 BY-SA版权

文章标签： css 前端

于 2025-03-10 10:19:02 首次发布

本文链接：https://blog.youkuaiyun.com/ctf_0226/article/details/146145615

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 等。这些样式属性将只应用于首字母，而不会影响其他文本。
<style>
p:first-letter {
font-size: 200%;
color: rgb(37, 109, 243);
}
</style>
<p>Stop thinking too much, it's alright not to know all the answers.</p>

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

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

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

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

.dropShadow {
filter: drop-shadow(2px 4px 8px #3723a1);
}
</style>

6. 文字描边
-webkit-text-stroke 是一个 CSS 属性，用于在 Webkit 浏览器（如 Chrome 和 Safari）中设置文字的描边效果。它可以让文字具有边框样式，类似于文字的描边效果
<style>
.box {
color: transparent;
-webkit-text-stroke: 1px cadetblue;
}
</style>

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

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

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

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

.box:paused {
background-color: blue;
}

@keyframes myAnimation {
0% {
transform: scale(0.5);
}

50% {
transform: scale(1);
}

100% {
transform: scale(0.5);
}
}
</style>

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

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