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

news2025/6/2 4:21:34

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.coloradmin.cn/o/2393174.html

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

相关文章

USB充电检测仪-2.USB充电检测仪硬件设计

本系列文章的最终目标是制作一个USB充电检测仪,支持的功能: 显示USB充电电压、电流、功率、充电量(单位WH);实现Typec口和USB-A口的相互转换(仅支持USB 2.0); 当然网上有很多卖这种…

AU6815集成音频DSP的2x25W数字型ClaSS D音频功率放大器(替代TAS5805)

1.特性 ● 输出配置 - 立体声 2.0: 2x25W (8Ω,21V,THD N 1%) - 立体声 2.0: 2x23W (6Ω, 18V,THD N 1%) ● 供电电压范围 - PVDD:4.5V-21V - DVDD: 1.8V 或者 3.3V ● 静态功耗 - 31.5mA at PVDD12V,BD - 18.5mA at PVDD12V,1SPW ● 音频性能指标 - Noise: ≤38uVrms - TH…

DeepSeek R1开源模型的技术突破与AI产业格局的重构

引言​ 2025年,中国AI企业深度求索(DeepSeek)推出的开源模型DeepSeek-R1,以低成本、高性能和开放生态为核心特征,成为全球人工智能领域的技术焦点。这一模型不仅通过算法创新显著降低算力依赖,更通过开源策…

什么是VR全景相机?如何选择VR全景相机?

VR全景相机的定义、原理及特点 定义:VR全景相机是利用特殊镜头设计和图像处理技术,能够捕捉到360度全方位、无死角的高清影像,并通过虚拟现实技术将用户带入沉浸式全景环境的相机设备。 原理:VR全景相机通过集成多个鱼眼镜头&am…

如何创建和使用汇编语言,以及下载编译汇编软件(Notepad++,NASM的安装)

一、汇编语言基础:用文本文档(Windows自带)初步尝试 1. 什么是汇编语言? 汇编语言是一种面向处理器(CPU)的低级编程语言,通过助记符(如MOV、ADD)直接控制硬件。它需要通过编译器(如…

Python训练营打卡Day40(2025.5.30)

知识点回顾: 彩色和灰度图片测试和训练的规范写法:封装在函数中展平操作:除第一个维度batchsize外全部展平dropout操作:训练阶段随机丢弃神经元,测试阶段eval模式关闭dropout # 先继续之前的代码 import torch import …

SpringBoot+vue+SSE+Nginx实现消息实时推送

一、背景 项目中消息推送,简单的有短轮询、长轮询,还有SSE(Server-Sent Events)、以及最强大复杂的WebSocket。 至于技术选型,SSE和WebSocket区别,网上有很多,我也不整理了,大佬的链…

哈工大计算机系统大作业 程序人生-Hello’s P2P

计算机系统 大作业 题 目 程序人生-Hello’s P2P 专 业 计算机与电子通信 学   号 2023111772 班   级 23L0503 学 生 张哲瑞     指 导 教 师 …

计算机一次取数过程分析

计算机一次取数过程分析 1 取址过程 CPU由运算器和控制器组成,其中控制器中的程序计数器(PC)保存的是下一条指令的虚拟地址,经过内存管理单元(MMU),将虚拟地址转换为物理地址,之后交给主存地址寄存器(MAR),从主存中取…

Halcon联合QT ROI绘制

文章目录 Halcon 操纵界面代码窗口代码 Halcon 操纵界面代码 #pragma once#include <QLabel>#include <halconcpp/HalconCpp.h> #include <qtimer.h> #include <qevent.h> using namespace HalconCpp;#pragma execution_character_set("utf-8&qu…

力扣面试150题--二叉树的右视图

Day 53 题目描述 思路 采取层序遍历&#xff0c;利用一个high的队列来保存每个节点的高度&#xff0c;highb和y记录上一个节点的高度和节点&#xff0c;在队列中&#xff0c;如果队列中顶部元素的高度大于上一个节点的高度&#xff0c;说明上一个节点就是上一层中最右边的元素…

江西某石灰石矿边坡自动化监测

1. 项目简介 该矿为露天矿山&#xff0c;开采矿种为水泥用石灰岩&#xff0c;许可生产规模200万t/a&#xff0c;矿区面积为1.2264km2&#xff0c;许可开采深度为422m&#xff5e;250m。矿区地形为东西一北东东向带状分布&#xff0c;北高南低&#xff0c;北部为由浅变质岩系组…

C# 类和继承(所有类都派生自object类)

所有类都派生自object类 除了特殊的类object&#xff0c;所有的类都是派生类&#xff0c;即使它们没有基类规格说明。类object是唯 一的非派生类&#xff0c;因为它是继承层次结构的基础。 没有基类规格说明的类隐式地直接派生自类object。不加基类规格说明只是指定object为 基…

02业务流程的定义

1.要想用好业务流程&#xff0c;首先必须得了解流程与认识流程&#xff0c;什么是业务流程。在认识流程之前&#xff0c;首先要理清两个基本概念&#xff0c;业务和流程。 业务指的是&#xff1a;个人的或者摸个机构的专业工作。流程&#xff0c;原本指的是水的路程&#xff0…

cursor rules设置:让cursor按执行步骤处理(分析需求和上下文、方案对比、确定方案、执行、总结)

写在前面的话&#xff1a; 直接在cursor rules中设置一下内容&#xff1a; RIPER-5 MULTIDIMENSIONAL THINKING AGENT EXECUTION PROTOCOL 目录 RIPER-5 MULTIDIMENSIONAL THINKING AGENT EXECUTION PROTOCOL 目录 上下文与设置 核心思维原则 模式详解 模式1: RESEARCH…

Linux操作系统之进程(四):命令行参数与环境变量

目录 前言&#xff1a; 什么是命令行参数 什么是环境变量 认识环境变量 PATH环境变量 HOME USER OLDPWD 本地变量 本地变量与环境变量的差异 核心要点回顾 结语&#xff1a; 前言&#xff1a; 大家好&#xff0c;今天给大家带来的是一个非常简单&#xff0c;但也十…

Typora-macOS 风格代码块

效果&#xff1a; 替换 Typora安装目录中 themes 文件夹下的 base.user.css 文件&#xff0c;直接替换即可&#xff0c;建议先备份。 css&#xff1a; /* 语法高亮配色 */ .CodeMirror-line .cm-number { color: #b5cea8; } /* 数字 - 浅绿色 */ .CodeMirror-line .…

ansible自动化playbook简单实践

方法一&#xff1a;部分使用ansible 基于现有的nginx配置文件&#xff0c;定制部署nginx软件&#xff0c;将我们的知识进行整合 定制要求&#xff1a; 启动用户&#xff1a;nginx-test&#xff0c;uid是82&#xff0c;系统用户&#xff0c;不能登录 启动端口82 web项目根目录/…

20250526惠普HP锐14 AMD锐龙 14英寸轻薄笔记本电脑(八核R7-7730U)的显卡驱动下载

20250526惠普HP锐14 AMD锐龙 14英寸轻薄笔记本电脑(八核R7-7730U)的显卡驱动下载 2025/5/26 14:44 百度&#xff1a;AMD 7700 显卡驱动 amd APU 显卡驱动 https://item.jd.com/100054819707.html 惠普HP【国家补贴20%】锐14 AMD锐龙 14英寸轻薄笔记本电脑(八核R7-7730U 16G 1T…

2025年5月蓝桥杯stema省赛真题——象棋移动

上方题目可点下方去处&#xff0c;支持在线编程&#xff5e; 象棋移动_scratch_少儿编程题库学习中心-嗨信奥 程序演示可点下方&#xff0c;支持源码和素材获取&#xff5e; 象棋移动-scratch作品-少儿编程题库学习中心-嗨信奥 题库收集了历届各白名单赛事真题和权威机构考级…