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
繁體地址,請注明出處:http://hk.pswp.cn/web/82002.shtml
英文地址,請注明出處:http://en.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:找樹左下角的值(遞歸中的回溯處理)!

一、題目內容: 題目要求找到一個二叉樹的最底層最左邊節點的值。具體來說,我們需要從根節點開始遍歷二叉 樹,找到最深的那層中的最左邊的節點,并返回該節點的值。因為要先找到最底層左側的值,所以我們選擇遍歷順序一定…