div或button一些好看实用的 CSS 样式示例

1:现代渐变按钮

.count {width: 800px;background: linear-gradient(135deg, #72EDF2 0%, #5151E5 100%);padding: 12px 24px;border-radius: 10px;box-shadow: 0 4px 15px rgba(81, 81, 229, 0.3);color: white;font-weight: bold;border: none;cursor: pointer;transition: all 0.3s ease;text-align: center;
}.count:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(81, 81, 229, 0.4);
}

2:磨砂玻璃效果(适合现代UI)

.count {width: 800px;background: rgba(135, 206, 235, 0.7);backdrop-filter: blur(10px);padding: 15px;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);border: 1px solid rgba(255, 255, 255, 0.3);color: #333;transition: all 0.3s ease;
}.count:hover {background: rgba(135, 206, 235, 0.9);
}

3:3D立体按钮

.count {width: 800px;background-color: #4CAF50;padding: 15px;border-radius: 10px;box-shadow: 0 5px 0 #3e8e41,0 10px 10px rgba(0, 0, 0, 0.1);color: white;font-weight: bold;text-align: center;cursor: pointer;transition: all 0.1s ease;position: relative;top: 0;
}.count:active {top: 5px;box-shadow: 0 2px 0 #3e8e41,0 5px 5px rgba(0, 0, 0, 0.1);
}

4: 简约边框样式

.count {width: 800px;background-color: transparent;padding: 15px;border-radius: 10px;border: 2px solid skyblue;color: skyblue;font-weight: bold;text-align: center;transition: all 0.3s ease;
}.count:hover {background-color: skyblue;color: white;box-shadow: 0 0 15px rgba(135, 206, 235, 0.5);
}

5: 霓虹发光效果

.count {width: 800px;background-color: #1e1e2f;padding: 15px;border-radius: 10px;border: 2px solid #00ffff;color: #00ffff;text-align: center;box-shadow: 0 0 10px #00ffff,inset 0 0 10px #00ffff;text-shadow: 0 0 5px #00ffff;transition: all 0.3s ease;
}.count:hover {box-shadow: 0 0 20px #00ffff,inset 0 0 15px #00ffff;
}

6:圆角卡片样式

.count {width: 800px;background-color: white;padding: 20px;border-radius: 15px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease, box-shadow 0.3s ease;border: none;
}.count:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

7:常用div简约

.count {background-color: skyblue;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/web/82002.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【基于STM32的新能源汽车智能循迹系统开发全解析】

基于STM32的新能源汽车智能循迹系统开发全解析(附完整工程代码) 作者声明 作者: 某新能源车企资深嵌入式工程师(专家认证) 技术方向: 智能驾驶底层控制 | 车规级嵌入式开发 原创声明: 本文已申…

HTML Day02

Day02 0. 引言1. 文本格式化1.1 HTML文本格式化标签1.2 HTML"计算机输出"标签1.3 HTML 引文,引用及标签定义 2. HTML链接2.1链接跳转原理(有点乱可跳过)2.2 HTML超链接2.3 target属性2.4 id属性2.4.1 id属性在页面内和不同页面的定…

MIT 6.S081 2020 Lab6 Copy-on-Write Fork for xv6 个人全流程

文章目录 零、写在前面一、Implement copy-on write1.1 说明1.2 实现1.2.1 延迟复制与释放1.2.2 写时复制 零、写在前面 可以阅读下 《xv6 book》 的第五章中断和设备驱动。 问题 在 xv6 中,fork() 系统调用会将父进程的整个用户空间内存复制到子进程中。**如果父…

xhr、fetch和axios

XMLHttpRequest (XHR) XMLHttpRequest 是最早用于在浏览器中进行异步网络请求的 API。它允许网页在不刷新整个页面的情况下与服务器交换数据。 // 创建 XHR 对象 const xhr new XMLHttpRequest();// 初始化请求 xhr.open(GET, https://api.example.com/data, true);// 设置请…

电脑驱动程序更新工具, 3DP Chip 中文绿色版,一键更新驱动!

介绍 3DP Chip 是一款免费的驱动程序更新工具,可以帮助用户快速、方便地识别和更新计算机硬件驱动程序。 驱动程序更新工具下载 https://pan.quark.cn/s/98895d47f57c 软件截图 软件特点 简单易用:用户界面简洁明了,操作方便,…

机器学习与深度学习06-决策树02

目录 前文回顾5.决策树中的熵和信息增益6.什么是基尼不纯度7.决策树与回归问题8.随机森林是什么 前文回顾 上一篇文章地址:链接 5.决策树中的熵和信息增益 熵和信息增益是在决策树中用于特征选择的重要概念,它们帮助选择最佳特征进行划分。 熵&#…

【Kotlin】数字字符串数组集合

【Kotlin】简介&变量&类&接口 【Kotlin】数字&字符串&数组&集合 文章目录 Kotlin_数字&字符串&数组&集合数字字面常量显式转换数值类型转换背后发生了什么 运算字符串字符串模板字符串判等修饰符数组集合通过序列提高效率惰性求值序列的操…

oscp练习PG Monster靶机复现

端口扫描 nmap -A -p- -T4 -Pn 192.168.134.180 PORT STATE SERVICE VERSION 80/tcp open http Apache httpd 2.4.41 ((Win64) OpenSSL/1.1.1c PHP/7.3.10) |_http-server-header: Apache/2.4.41 (Win64) OpenSSL/1.1.1c PHP/7.3.10 | http-methods:…

近期知识库开发过程中遇到的一些问题

我们正在使用Rust开发一个知识库系统,遇到了一些问题,在此记录备忘。 错误:Unable to make method calls because underlying connection is closed 场景:在docker中调用headless_chrome时出错 原因:为减小镜像大小&am…

Ubuntu 22.04 系统下 Docker 安装与配置全指南

Ubuntu 22.04 系统下 Docker 安装与配置全指南 一、前言 Docker 作为现代开发中不可或缺的容器化工具,能极大提升应用部署和环境管理的效率。本文将详细介绍在 Ubuntu 22.04 系统上安装与配置 Docker 的完整流程,包括环境准备、安装步骤、权限配置及镜…

C#获取磁盘容量:代码实现与应用场景解析

C#获取磁盘容量:代码实现与应用场景解析 在软件开发过程中,尤其是涉及文件存储、数据备份等功能时,获取磁盘容量信息是常见的需求。通过获取磁盘的可用空间和总大小,程序可以更好地进行资源管理、预警提示等操作。在 C# 语言中&a…

2025年- H56-Lc164--200.岛屿数量(图论,深搜)--Java版

1.题目描述 2.思路 (1)主函数,存储图结构 (2)主函数,visit数组表示已访问过的元素 (3)辅助函数,用递归(深搜),遍历以已访问过的元素&…

详细到用手撕transformer下半部分

之前我们讨论了如何实现 Transformer 的核心多头注意力机制,那么这期我们来完整地实现整个 Transformer 的编码器和解码器。 Transformer 架构最初由 Vaswani 等人在 2017 年的论文《Attention Is All You Need》中提出,专为序列到序列(seq2s…

WPF事件处理器+x名称空间

目录 ​编辑 一、事件处理器知识点 1. XAML中的事件绑定 2. C#中的事件处理方法 3. 方法签名解释 4. 命名规范 工作流程 二、导入引用名称空间 三、x名称空间及其常用元素 (1)x名称空间的由来和作用 (2)x名称空间里都有…

Axure设计案例——科技感渐变线性图

想让数据变化趋势展示告别枯燥乏味,成为吸引观众目光的亮点吗?快来看看这个Axure设计的科技感渐变线性图案例!科技感设计风格凭借炫酷的渐变色彩打破传统线性图的单调,营造出一种令人过目难忘的视觉体验。每一条线条都仿佛是流动的…

Git全流程操作指南

Git全流程操作指南 一、Git 环境配置 1. 安装 Git Windows:下载 Git for Windows macOS:brew install git Linux: sudo apt-get update && sudo apt-get install git # Debian/Ubuntu sudo yum install git …

AI与软件工程结合的未来三年发展路径分析

基于对数字化、制造业、工业、零售业等行业的系统调研,以及微软、谷歌、阿里、华为等大厂的实践案例,我们可以预见未来三年AI与软件工程结合将呈现以下发展路径和趋势。 一、技术应用维度 1. AI辅助编程工具全面普及 未来三年,AI辅助编程工…

tiktoken学习

1.tiktoken是OpenAI编写的进行高效分词操作的库文件。 2.操作过程: enc tiktoken.get_encoding("gpt2") train_ids enc.encode_ordinary(train_data) val_ids enc.encode_ordinary(val_data) 以这段代码为例,get_encoding是创建了一个En…

DeepSeek 赋能文化遗产数字化修复:AI 重构千年文明密码

目录 一、引言二、文化遗产数字化修复概述2.1 文化遗产数字化修复的意义2.2 传统数字化修复方法与局限 三、DeepSeek 技术剖析3.1 DeepSeek 技术原理与核心优势3.2 相比其他技术的独特之处 四、DeepSeek 在文化遗产数字化修复中的应用4.1 破损文物的智能修复4.2 文化遗产的虚拟…

leetcode题解513:找树左下角的值(递归中的回溯处理)!

一、题目内容: 题目要求找到一个二叉树的最底层最左边节点的值。具体来说,我们需要从根节点开始遍历二叉 树,找到最深的那层中的最左边的节点,并返回该节点的值。因为要先找到最底层左侧的值,所以我们选择遍历顺序一定…