常用CSS技巧总结
效果相关
网站置灰
CSS滤镜 -webkit-filter
一行代码足以
body{
filter: grayscale(1);
}
//或者
html.gray-mode {
filter: grayscale(.95);
-webkit-filter: grayscale(.95);
}
blur 模糊-webkit-filter:blur(2px);
brightness 亮度-webkit-filter:brightness(25%);
contrast 对比度-webkit-filter: contrast(50%);
drop-shadow 阴影-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
opacity 透明度-webkit-filter: opacity(50%);
grayscale 灰度-webkit-filter: grayscale(80%);
sepia 褐色-webkit-filter: sepia(100%);
invert 反色-webkit-filter: invert(100%);
hue-rotate 色相旋转-webkit-filter:hue-rotate(180deg);
saturate 饱和度-webkit-filter: saturate(1000%);
毛玻璃效果
CSS 中实现玻璃效果通常使用的是 backdrop-filter 属性。这个属性可以在元素背景和内容之间创建一个视觉效果，使背景模糊或以其他方式被处理，以便更好地突出元素的内容。
以下是一个简单的示例，演示如何在一个元素上应用玻璃效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Glass Effect</title>
<style>
.content {
padding: 20px;
background-color: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
.glass-effect {
-webkit-backdrop-filter: blur(6.2px);
backdrop-filter: blur(6.2px);
background: rgba(255, 255, 255, 0.4);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.24);
}
</style>
</head>
<body>
<div>
<div class="content glass-effect">
<h2>Glass Effect</h2>
<p>
This is a simple example of glass effect using CSS backdrop-filter
property.
</p>
</div>
</div>
</body>
</html>
带背景的文字效果
background-clip: text 是一个 CSS 属性，用于控制背景的绘制方式，让背景只显示在文本内容的区域内。
当你将 background-clip 设置为 text 时，背景会被限制在文本的轮廓内部，而不是整个元素的边界框内。这样可以创建一种有趣的效果，将背景图像或颜色填充到文本内容的形状中，而不是元素的整个区域。
实例:
<div class="clip">clip</div>
效果如下:
抖动效果
这个“摇晃”动画效果会在用户输入无效内容时晃动输入框。它简单而优雅。例如，如果用户在文本框中输入数字而不是字母，输入框将会摇晃。
<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>
input:invalid{
animation: shake 0.2s ease-in-out 0s 2;
box-shadow: 0 0 0.4em red;
}
@keyframes shake {
0% { margin-left: 0rem; }
25% { margin-left: 0.5rem; }
75% { margin-left: -0.5rem; }
100% { margin-left: 0rem; }
}
自定义光标
我们可以通 CSS 中的cursor属性来自定义光标的样式，只需要指定自定义光标的图片路径即可：
body{
cursor: url("path-to-image.png"), auto;
}
除此之外， cursor还内置了很多鼠标样式供我们选择：
文本相关
文本溢出
文字单行溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
word-wrap: break-word; // 允许长单词换行
/* 或者 */
word-break: break-all; // 允许任意位置换行
多行文字溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
全英文数字换行失效
使用 word-wrap 或者 word-break 属性：这两个属性用于控制文本在需要换行时的行为。可以尝试将其中一个属性应用于包含文本的元素，以确保文本在需要换行时能够正确地换行。
cssCopy Code.example {
word-wrap: break-word; /* 允许长单词换行 */
/* 或者 */
word-break: break-all; /* 允许任意位置换行 */
}
实现首字下沉
我们可以使用::first-letter来实现文本首字母的下沉：
p.texts:first-letter {
font-size: 200%;
color: #8A2BE2;
}
:first-letter选择器用来指定元素第一个字母的样式，它仅适用于在块级元素中。
文本是否能被选中
在样式开发中，有可被选中， 和不可被用户选中的元素。这时候就用到 了今天介绍的user-select属性。
user-select的属性值
| 属性值 | 说明 |
|---|---|
| all | 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素 |
| auto | 文本将根据浏览器的默认属性进行选择 |
| contain | 选择该元素范围内的文本，只支持(Explorer未测试) |
| none | 元素和子元素的文本将无法被选中 |
| text | 文本可以被选中 |
| inherit | 继承父元素的此属性 |
| initial | 设置为初始的样式属性 |
| revert | 样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按用户定义的设置否则，按照浏览器默认的的样式设置在否则，等价于unset |
| unset | 如果该属性可以被继承，则是继承的值，不可以被继承(initial),则是默认的值 |
例如，如果你想要禁止用户选择某个元素中的文本内容，你可以这样设置：
.element {
user-select: none;
}
这会阻止用户选择和复制 .element 元素中的文本。这在一些特定情况下很有用，比如在拖放操作或可拖动元素上，你可能不希望用户选择文本。
需要注意的是，user-select 属性的兼容性并不是很好，不同浏览器支持程度不同。因此，在使用时应当谨慎考虑兼容性和用户体验。
文本强调效果
text-emphasis 用于为文本添加强调效果。它可以用来在文本上方或下方添加装饰性的标记，以突出显示特定的文本内容。这个属性主要用于美化文本，为其增加一些视觉上的效果。
text-emphasis 属性有以下几个可能的值：
none：默认值。不对文本应用任何强调效果。accent：在文本上方或下方添加一个小的重点标记。dot：在文本上方或下方添加一个小的圆点。circle：在文本上方或下方添加一个小的空心圆。double-circle：在文本上方或下方添加一个小的双层空心圆。triangle：在文本上方或下方添加一个小的三角形。sesame：在文本上方或下方添加一个小的芝麻形状。filled：在文本上方或下方添加一个填充的矩形。
可以使用 text-emphasis 属性将强调标记应用于文本元素。可以指定包括表情符号在内的任何字符串作为强调标记。
h1 {
text-emphasis: "⭐️";
}
注意，text-emphasis 是一个简写属性，用于在一个声明中设置 text-emphasis-style 和 text-emphasis-color。强调装饰符的字号是主文字内容字号的一半，例如假设文字是20px，则上方的强调字符的大小是10px。
如果你想在文本下方添加强调效果，可以结合使用 text-emphasis-position 属性。这个属性用于指定强调标记的位置，可以是在文本上方、下方，或者两者皆有。
以下是一个例子，演示了如何在文本下方添加一个小的圆点作为强调效果：
.element {
text-emphasis: dot;
text-emphasis-position: under;
}
这将在 .element 元素的文本下方添加一个小的圆点作为强调效果。
将文本设为大写或小写
大写或小写字母可以不必在 HTML中设置。可以在 CSS 中使用text-transform熟悉来强制任何文本为大写或小写。
/* 大写 */
.upper {
text-transform: uppercase;
}
/* 小写 */
.lower {
text-transform: lowercase;
}
文字描边效果
在 CSS 中可以使用text-stroke属性使文本更易读，它会向文本添加轮廓效果。
h1 {
color: #fff;
font-size: 80px;
-webkit-text-stroke: 2px crimson;
text-stroke: 2px crimson;
}
效果如下：
注意，text-stroke 属性值中有两部分，第一部分是文字描边的宽度，第二部分是文字描边的颜色。
渐变
普通渐变
渐变分为线性渐变、径向渐变，这里笔者直接记录的使用方式，也是为了使用的时候更加的直观，这里说下，在使用线性渐变的时候，使用角度以及百分比去控制渐变，会更加的灵活
使用方式:
//渐变(方向)
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));
//渐变(角度)
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);
边框渐变
border有个border-image的属性，类似background也有个background-image一样,通过为其设置渐变颜色后，实现的渐变，后面的数字4为x方向偏移量
使用方式:
.border-grident{
margin-top: 20px;
width: 200px;
height: 200px;
border: 4px solid;
border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}
CSS伪类
伪类三角形
首先来看下示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-三角形</title>
<style>
.triangle {
width: 0;
height: 0;
border: 100px solid;
border-color: orangered skyblue gold yellowgreen;
}
</style>
</head>
<body>
<div class="triangle">
</div>
</body>
</html>
如果想要一个下的三角形，可以让border的上边框可见，其他边框颜色都设置为透明
.down-triangle {
width: 0;
height: 0;
border-top: 50px solid skyblue;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
:where
:where() CSS 伪类函数接受选择器列表作为它的参数，，将会选择所有能被该选择器列表中任何一条规则选中的元素。
以下代码，文本都会变成 yellow 颜色
:where(div p) span {
color: yellow;
}
<div class="test-div">
<span>哈哈</span>
</div>
<p class="test-p">
<span>哈哈</span>
</p>
使用场景
其实 :where() 的功能本来就有，只不过有了它之后，实现起这些功能来就更加方便快捷~接下来就来讲讲它的组合/叠加功能
我们来看下面的这段 css 代码
div a:hover,
li a:hover,
.cla a:hover,
.aa .bb a:hover,
[class^='bold'] a:hover{
color: yellow;
}
我们可以使用 :where()来简化这个写法，使用它找出 div li .cla 这三种选择器，选择器可以是标签，也可以是类名，也可以是选择器表达式
:where(div, li, .cla, .a .b, [class^='bold']) a:hover {
color: yellow;
}
再来看看使用 :where() 的组合，完成一些功能，我们看以下的代码
.dark-theme button,
.dark-theme a,
.light-theme button,
.light-theme a{
color: pink;
}
我们完全可以使用 :where() 简化这个写法
:where(.dark-theme, light-theme) :where(button, a) {
color: pink;
}
优先级
:where()的优先级是 0，我们可以看下面代码
.test {
color: yellow;
}
:where(.test) {
color: pink
}
最后字体颜色是 yellow
:is
:is()跟:where()可以说一模一样，区别就是 :is()的优先级不是0，而是由传入的选择器来决定的，拿刚刚的代码来举个例子
div {
color: yellow;
}
:where(.test) {
color: pink
}
<div class="test">哈哈</div>
这要是 :where()，那么字体颜色会是 yellow，因为它的优先级是 0
但是如果是 :is()的话，字体颜色会是 pink，因为 类选择器 优先级比 标签选择器 优先级高~
:is(.test) {
color: pink
}
div {
color: yellow;
}
<div class="test">哈哈</div>
:has
:has() 伪类是用于选择包含特定后代元素的父元素的一个选择器。它的语法如下：
selector:has(selector-list)
其中，selector 是要选择的父元素的选择器，而 selector-list 是要包含在父元素内的后代元素的选择器列表。
然而，需要注意的是，:has() 伪类在 CSS 中并不是标准的选择器，目前仅有少数浏览器支持它，而且通常只在 JavaScript 库（如 jQuery）中使用。这是因为它的实现相对复杂，涉及到对文档结构进行递归查询，这在 CSS 选择器中并不常见。
例如，如果要选择所有包含至少一个 <span> 后代元素的 <div> 元素，可以使用如下的 CSS 选择器：
div:has(span) {
/* 样式 */
}
然而，因为目前大多数浏览器并不支持 :has() 伪类，你可能需要使用 JavaScript 来实现类似的功能。
现在又有两个场景
- 判断容器有没有子img，有的话字体设置为 12px（上面的例子是后代选择器，不是子选择器）
- 判断容器有没有一个小相邻的img，有的话设置字体颜色为 red
我们可以这么去实现：
.container:has(>img) {
font-size: 12px;
}
.container:has(+img) {
color: red;
}
再来一个场景，当我 hover 到 子img 上时，我想要让 container 的字体变粗，可以这么去使用~
.container:has(>img:hover) {
color: red;
}
自定义选定的文本样式::selection
在样式开发中，有可被选中， 和不可被用户选中的元素。这时候就用到 了今天介绍的user-select属性。 可以通过样式自定义文本选择的颜色和样式，关键样式如下：
::selection {
color: #ffffff;
background-color: #ff4c9f;
}
除了最后一个元素 :not
除了最后一个元素之外的所有元素都需要一些样式，使用 :not 选择器可以非常容易实现。
例如实现一个列表，最后一个元素不需要下划线，如下：
li:not(:last-child) {
border-bottom: 1px solid #ebedf0;
}