百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

10 个前端开发人员经常使用的 CSS 技巧

liuian 2025-01-11 15:11 30 浏览

新人求关注?,点击右上角 ↗? 关注,博主日更,全年无休,您的关注是我的最大的更新的动力~ 感谢大家了

这里有10个CSS技巧,让你的写的 CSS 起飞

1. CSS变量

这不完全是一个设计技巧,但当你试图构建可重复使用的内容并且需要跟踪你的颜色时,CSS变量非常有用。一旦需要,你可以立刻在所有地方更改这些颜色。

:root {
  --main-color: #3498db; /* Blue */
}

body {
  background-color: var(--main-color);
}

button {
  background-color: var(--main-color);
}

2. 盒子阴影

为按钮和盒子添加阴影,可以让它们看起来仿佛从页面中弹出来。

这就像为你的网站增加了一点3D效果。

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Shadow */
}

3. 文本阴影

为文本添加柔和的阴影可以让它更加突出。

这样不仅仅通过颜色或字体大小,还能通过阴影将标题与普通文本区分开来。

h1 {
  font-size: 36px;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Shadow */
}

4. CSS渐变

与其使用纯色,不如使用渐变将两种或多种颜色混合在一起。

.gradient-bg {
  height: 300px;
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from orange to pink */
}

5. 悬停动画

当有人将鼠标悬停在按钮或链接上时,你可以让它变大、旋转、改变外观或移动。

button {
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

button:hover {
  transform: scale(1.1); /* Grow on hover */
}

6. Flexbox和Grid布局

Flexbox和Grid是安排页面元素的强大工具。

.flex-container {
  display: flex;
  justify-content: space-around; /* Space items evenly */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  gap: 10px; /* Gap between items */
}

.item {
  background-color: #f0f0f0;
  padding: 20px; /* Padding for items */
}

7. 剪切路径(Clip-Path)

使用clip-path,你可以从图像和盒子中裁剪出圆形或星形等形状。

.circle {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  clip-path: circle(50% at 50%, 50%); /* Circle shape */
}

8. CSS混合模式

混合模式允许你以不同方式混合颜色和图像。

.blend-container {
  position: relative;
}

.blend-image {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply; /* Blends the image with background */
}

9. 自定义光标让页面更有趣

当鼠标悬停在网站的某些部分时,可以将光标更改为特别的样式。

.custom-cursor {
  cursor: url('cursor-icon.png'), auto; /* Custom cursor */
}

10. CSS滤镜

滤镜可以让你的图片呈现不同的效果,比如将其变为黑白或添加模糊效果。

.filtered-image {
  width: 100%;
  filter: grayscale(100%) blur(2px); /* Black and white with blur */
}

小结

欢迎留言评论,大家一起探讨,一起进步~ 欢迎点赞、关注?、转发~

求关注~全年无休日更~ 求关注~

相关推荐

2023年最新微信小程序抓包教程(微信小程序 抓包)

声明:本公众号大部分文章来自作者日常学习笔记,部分文章经作者授权及其他公众号白名单转载。未经授权严禁转载。如需转载,请联系开百。请不要利用文章中的相关技术从事非法测试。由此产生的任何不良后果与文...

测试人员必看的软件测试面试文档(软件测试面试怎么说)

前言又到了毕业季,我们将会迎来许多需要面试的小伙伴,在这里呢笔者给从事软件测试的小伙伴准备了一份顶级的面试文档。1、什么是bug?bug由哪些字段(要素)组成?1)将在电脑系统或程序中,隐藏着的...

复活,视频号一键下载,有手就会,长期更新(2023-12-21)

视频号下载的话题,也算是流量密码了。但也是比较麻烦的问题,频频失效不说,使用方法也难以入手。今天,奶酪就来讲讲视频号下载的新方案,更关键的是,它们有手就会有用,最后一个方法万能。实测2023-12-...

新款HTTP代理抓包工具Proxyman(界面美观、功能强大)

不论是普通的前后端开发人员,还是做爬虫、逆向的爬虫工程师和安全逆向工程,必不可少会使用的一种工具就是HTTP抓包工具。说到抓包工具,脱口而出的肯定是浏览器F12开发者调试界面、Charles(青花瓷)...

使用Charles工具对手机进行HTTPS抓包

本次用到的工具:Charles、雷电模拟器。比较常用的抓包工具有fiddler和Charles,今天讲Charles如何对手机端的HTTS包进行抓包。fiddler抓包工具不做讲解,网上有很多fidd...

苹果手机下载 TikTok 旧版本安装包教程

目前苹果手机能在国内免拔卡使用的TikTok版本只有21.1.0版本,而AppStore是高于21.1.0版本,本次教程就是解决如何下载TikTok旧版本安装包。前期准备准备美区...

【0基础学爬虫】爬虫基础之抓包工具的使用

大数据时代,各行各业对数据采集的需求日益增多,网络爬虫的运用也更为广泛,越来越多的人开始学习网络爬虫这项技术,K哥爬虫此前已经推出不少爬虫进阶、逆向相关文章,为实现从易到难全方位覆盖,特设【0基础学爬...

防止应用调试分析IP被扫描加固实战教程

防止应用调试分析IP被扫描加固实战教程一、概述在当今数字化时代,应用程序的安全性已成为开发者关注的焦点。特别是在应用调试过程中,保护应用的网络安全显得尤为重要。为了防止应用调试过程中IP被扫描和潜在的...

一文了解 Telerik Test Studio 测试神器

1.简介TelerikTestStudio(以下称TestStudio)是一个易于使用的自动化测试工具,可用于Web、WPF应用的界面功能测试,也可以用于API测试,以及负载和性能测试。Te...

HLS实战之Wireshark抓包分析(wireshark抓包总结)

0.引言Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口,直接...

信息安全之HTTPS协议详解(加密方式、证书原理、中间人攻击 )

HTTPS协议详解(加密方式、证书原理、中间人攻击)HTTPS协议的加密方式有哪些?HTTPS证书的原理是什么?如何防止中间人攻击?一:HTTPS基本介绍:1.HTTPS是什么:HTTPS也是一个...

Fiddler 怎么抓取手机APP:抖音、小程序、小红书数据接口

使用Fiddler抓取移动应用程序(APP)的数据接口需要进行以下步骤:首先,确保手机与计算机连接在同一网络下。在计算机上安装Fiddler工具,并打开它。将手机的代理设置为Fiddler代理。具体方...

python爬虫教程:教你通过 Fiddler 进行手机抓包

今天要说说怎么在我们的手机抓包有时候我们想对请求的数据或者响应的数据进行篡改怎么做呢?我们经常在用的手机手机里面的数据怎么对它抓包呢?那么...接下来就是学习python的正确姿势我们要用到一款强...

Fiddler入门教程全家桶,建议收藏

学习Fiddler工具之前,我们先了解一下Fiddler工具的特点,Fiddler能做什么?如何使用Fidder捕获数据包、修改请求、模拟客户端向服务端发送请求、实施越权的安全性测试等相关知识。本章节...

fiddler如何抓取https请求实现手机抓包(100%成功解决)

一、HTTP协议和HTTPS协议。(1)HTTPS协议=HTTP协议+SSL协议,默认端口:443(2)HTTP协议(HyperTextTransferProtocol):超文本传输协议。默认...