CSS 实用小技巧合集：从视觉效果到响应式组件
CSS 主要用于设置网页的视觉样式，包括布局、颜色、字体和其他设计细节。它使得网页设计与内容分离，从而提高了网页的可维护性和可重用性。
🌞 今天我将分享一些有用的 CSS 小技巧，后续不断完善，灵感不息，创作不止。
filter家族
filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染
图片置灰
filter: grayscale(100%);
滤镜阴影
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
大多数人都知道box-shadow是设置盒子阴影，但你知道 filter: drop-shadow与box-shadow的区别吗？
举个例子：
不难看出二者的区别。值得注意的是，box-shadow通常围绕元素的矩形盒子生成阴影，而filter: drop-shadow()会根据元素渲染结果的 Alpha 形状生成阴影。因此，当图片带有透明区域时，两者的视觉差异最明显，但drop-shadow()并非只能用于无背景图片。
图片模糊化
//数值越高越模糊
filter: blur(3px);
图片亮度调整
filter: brightness(1);
brightness() CSS函数将线性乘数应用于输入图像，使其看起来更亮或更暗。
加上属性后的效果：
文本省略
单行文本
<style>
.box {
width: 150px;
height: 80px;
border: 1px black solid;
border-radius: 5px;
overflow: hidden;
/*超出部分隐藏*/
text-overflow: ellipsis;
/*超出部分显示省略号*/
white-space: nowrap;
/*规定段落中的文本不进行换行 */
}
</style>
<body>
<div class="box">
人总是在遭遇一次重创之后，才会幡然醒悟，重新认识自己的坚强和隐忍。所以，无论你正在遭遇什么磨难，都不要一味抱怨上苍不公平，甚至从此一蹶不振。人生没有过不去的坎，只有过不去的人。
</div>
</body>
多行文本
<style>
.box {
width: 150px;
height: 80px;
border: 1px black solid;
border-radius: 5px;
overflow: hidden;
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*设置伸缩盒对象的子元素的排列方式*/
-webkit-line-clamp: 5; /*用来限制在一个块元素中显示的文本的行数*/
word-break: break-all; /*让浏览器实现在任意位置的换行 *break-all为允许在单词内换行*/
}
</style>
<body>
<div class="box">
人总是在遭遇一次重创之后，才会幡然醒悟，重新认识自己的坚强和隐忍。所以，无论你正在遭遇什么磨难，都不要一味抱怨上苍不公平，甚至从此一蹶不振。人生没有过不去的坎，只有过不去的人。
</div>
</body>
渐变
linear-gradient
linear-gradient() 创建一个由两种或多种颜色沿一条直线进行线性过渡的图像。
linear-gradient(to right, #ff9a62, var(--main--bg));
radial-gradient()
radial-gradient() 创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成，其形状可以是圆形或椭圆形。
background: radial-gradient(rgb(243 152 73) 23%, #000000 75%);
mask
mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
Case 1
先看图
如果你想做一个图片的轮播切换效果，就会出现上图所示，比较生硬。但是加上下面的mask效果，边缘有一层遮罩效果，体验就会好许多
mask: linear-gradient(
90deg,
transparent,
black 10%,
black 90%,
transparent
);
mask设置transparent的部分，图片会变得透明
Case 2
两张图片的一个好看的展示效果！
<style>
.box {
position: relative;
}
img {
width: 600px;
position: absolute;
}
img:nth-child(1) {
mask: linear-gradient(124deg, #000 55%, transparent 45%)
}
img:nth-child(2) {
mask: linear-gradient(301deg, #000 48%, transparent 53%)
}
</style>
<body>
<div class="box">
<img src="./img/pic1.png" alt="">
<img src="./img/pic2.png" alt="">
</div>
</body>
两张图片重叠使用mask可达到分割渐变的效果。
其他
background-blend-mode
//以下三个css属性结合，可以达到背景与背景颜色重合的效果
background: url(../../assets/img/user_bg.png) no-repeat 50% 100%;
background-blend-mode: overlay;
background-color: rgba(255, 255, 255,0.1);
overlay 模式将背景图像和背景颜色以混合模式的方式结合起来，增强对比度，同时保持图像的明亮度。这种模式通常用于增强图像的视觉效果或与背景颜色进行对比。
让文字发光
text-shadow: 0px 0px 5px rgba(255, 255, 255)
毛玻璃
backdrop-filter: blur(2px);
backdrop-filter 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
<style>
.box {
width: 100vw;
height: 100vh;
background-color: gray;
display: flex;
align-items: center;
justify-content: center;
background: url('./img.png') no-repeat;
background-size: cover;
}
.text {
width: 200px;
height: 100px;
backdrop-filter: blur(2px);
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.9);
display: flex;
color: black;
align-items: center;
justify-content: center;
}
</style>
<body>
<div class="box">
<div class="text">
css毛玻璃
</div>
</div>
</body>
css小案例
图片循环轮播
如下sass代码
<template>
<div class="swiperContent">
<div class="picImg">
<img src="./img/pic1.jpg" alt="">
<img src="./img/pic2.png" alt="">
<img src="./img/pic3.png" alt="">
<img src="./img/pic4.jpg" alt="">
<img src="./img/pic5.jpg" alt="">
<img src="./img/pic6.png" alt="">
<img src="./img/pic7.jpg" alt="">
<img src="./img/pic8.jpg" alt="">
<img src="./img/pic1.jpg" alt="">
<img src="./img/pic2.png" alt="">
<img src="./img/pic3.png" alt="">
<img src="./img/pic4.jpg" alt="">
<img src="./img/pic5.jpg" alt="">
<img src="./img/pic6.png" alt="">
<img src="./img/pic7.jpg" alt="">
<img src="./img/pic8.jpg" alt="">
</div>
</div>
</template>
<style scoped lang="scss">
@keyframes swiper {
to {
transform: translateX(-50%);
}
}
.swiperContent {
width: 80%;
height: 100vh;
display: flex;
overflow: hidden;
margin: auto;
mask: linear-gradient(90deg,
transparent,
black 10%,
black 90%,
transparent);
.picImg {
margin: auto;
/* 撑满就不会出现动画效果的卡顿了 */
width: max-content;
display: flex;
align-items: center;
animation: swiper 10s linear infinite;
img {
width: 260px;
height: 150px;
border-radius: 10px;
margin-right: 40px;
}
&:hover {
animation-play-state: paused;
}
}
}
</style>
扫光
容器扫光
如下sass代码
<template>
<div class="tips">热门商品</div>
</template>
<style scoped lang="scss">
@keyframes tip {
from {
transform: skewX(45deg) translateX(80px);
}
to {
transform: skewX(45deg) translateX(-10px);
}
}
.tips {
width: 45px;
margin-left: 10px;
background-color: red;
font-size: 10px;
padding: 5px 10px;
font-weight: bold;
border-radius: 2px;
color: #fff;
position: relative;
overflow: hidden;
margin: 100px 100px;
&::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 15px;
height: 100%;
background-color: rgb(255, 255, 255, 0.5);
animation: tip 1s linear infinite;
}
}
</style>
文字扫光
<template>
<div class="box">
<span class="tip">文字扫光效果</span>
</div>
</template>
<style scoped lang="scss">
@keyframes shine {
from {
background-position: 0% 0%;
}
to {
background-position: 150% 100%;
}
}
.box {
width: 200px;
height: 100px;
border-radius: 5px;
font-weight: bold;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
.tip {
font-size: 30px;
background: #585757 linear-gradient(to left, transparent, #fff, transparent) no-repeat 0 0;
background-size: 40% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: shine 1s infinite;
}
}
</style>
元素倒影
代码如下
<template>
<div class="box">
<img
src="https://ts1.cn.mm.bing.net/th/id/R-C.6d8a57256ba630185743ba8557f4ed14?rik=VldXaSQLI8%2bObA&riu=http%3a%2f%2fimage.yjcf360.com%2fu%2fcms%2fwww%2f201904%2f120850581kxr.jpg&ehk=WNEMqv9m%2f6G74rn9TCLdjOYquj4EU%2bdDYDxY6yE9Q8E%3d&risl=&pid=ImgRaw&r=0"
class="pic"
/>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.box {
width: 100%;
height: 100vh;
background: black;
display: flex;
justify-content: center;
.pic {
width: 300px;
height: 450px;
margin-top: 50px;
border-radius: 4px;
box-shadow: 0px 0px 10px #ffffffcc;
// 元素倒影
-webkit-box-reflect: below 10px
linear-gradient(transparent, transparent, rgb(0, 0, 0, 0.8));
}
}
</style>
元素交融展开
代码如下
<template>
<div class="app">
<div class="text">我于杀戮之中盛放，亦如黎明中的花朵</div>
</div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
@keyframes animation {
0% {
letter-spacing: -100px;
filter: blur(6px);
}
100% {
letter-spacing: 0px;
filter: blur(0px);
}
}
.app {
width: 100vw;
height: 100vh;
background: #000;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
font-size: 78px;
.text {
animation: animation 3s infinite;
}
}
</style>
卡片悬浮联动高亮
代码如下：
<template>
<div class="box">
<nav class="quick-entry-grid" aria-label="快捷入口">
<button
type="button"
class="quick-entry"
style="
--entry-rgb: 225, 225, 225;
--quick-icon: url('图片地址');
"
>
<span class="quick-entry__icon" aria-hidden="true">
<img
src="图片地址"
alt=""
/>
</span>
<span class="quick-entry__title">测试</span>
<svg
class="quick-entry__arrow"
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
>
<path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="1.5" />
</svg>
</button>
</nav>
</div>
</template>
<style scoped lang="scss">
.box{
background: #000;
}
.quick-entry {
position: relative;
isolation: isolate;
display: grid;
height: 76px;
grid-template-columns: 60px minmax(0, 1fr) 20px;
align-items: center;
column-gap: 12px;
padding: 0 16px;
overflow: hidden;
color: rgba(239, 238, 250, 0.82);
background: rgba(11, 12, 21, 0.52);
border: 1px solid rgba(224, 221, 255, 0.11);
border-radius: 8px;
cursor: pointer;
transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease,
transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
&__icon {
position: relative;
isolation: isolate;
display: grid;
width: 60px;
height: 60px;
place-items: center;
transition: filter 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
img {
z-index: 1;
width: 56px;
height: 56px;
object-fit: contain;
}
&::after {
position: absolute;
z-index: 2;
inset: 2px;
background: linear-gradient(
110deg,
transparent 31%,
rgba(255, 255, 255, 0.18) 41%,
#fff 49%,
rgba(195, 218, 255, 0.48) 55%,
transparent 68%
);
background-position: 160% 0;
background-size: 260% 100%;
content: "";
opacity: 0;
pointer-events: none;
mix-blend-mode: screen;
mask: var(--quick-icon) center / contain no-repeat;
}
}
&__title,
&__arrow {
transition: color 220ms ease, opacity 220ms ease,
transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
&__arrow {
opacity: 0.58;
transform: translateX(-3px);
}
&:hover {
background-color: rgba(15, 16, 27, 0.68);
border-color: rgba(var(--entry-rgb), 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 14px 34px -20px rgba(255, 255, 255, 0.55);
transform: translateY(-3px);
.quick-entry__icon {
filter: drop-shadow(0 0 5px rgba(var(--entry-rgb), 0.28));
transform: translateX(2px);
img {
animation: quick-entry-icon-glow 1.6s ease-in-out infinite;
}
&::after {
animation: quick-entry-icon-sheen 1.6s cubic-bezier(0.22, 0.75, 0.22, 1) infinite;
}
}
.quick-entry__title {
color: #fff;
transform: translateX(2px);
}
.quick-entry__arrow {
opacity: 1;
transform: translateX(1px);
}
}
}
@keyframes quick-entry-icon-glow {
0%,
64%,
100% {
filter: brightness(1) saturate(1);
}
30% {
filter: brightness(1.22) saturate(1.12) drop-shadow(0 0 7px rgba(215, 224, 255, 0.62));
}
}
@keyframes quick-entry-icon-sheen {
0% {
opacity: 0;
background-position: 160% 0;
}
34% {
opacity: 1;
}
62%,
100% {
opacity: 0;
background-position: -160% 0;
}
}
</style>
写在最后
🙉 以上就是一些开发中可能会用到的css小技巧，如果有机会我还会和大家分享更多有趣且实用小技巧！！！
最后分享几个使用的第三方库和一些网站，仅供参考
