用 CSS 寫一個漸變色邊框的輸入框

在這里插入圖片描述
Using_CSS_gradients MDN
多漸變色輸入框,群友問了下,就試著寫了下,看了看 css 漸變色 MDN 文檔,其實很簡單,代碼記錄下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {height: 100vh;display: flex;justify-content: center;align-items: center;}.btn {width: 800px;height: 100px;display: flex;border-radius: 50px;overflow: hidden;position: relative;background: linear-gradient(to right,#ff8e10,#e4ca0f,#6ecd00,#00cedc,#204578);}.input {position: absolute;width: calc(100% - 10px);height: calc(100% - 10px);left: 50%;bottom: 50%;transform: translate(-50%, 50%);border-radius: 50px;background-color: #fff;}</style></head><body><div class="btn"><div class="input"></div></div></body>
</html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/215235.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/215235.shtml
英文地址,請注明出處:http://en.pswp.cn/news/215235.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

使用FFMPEG轉碼,轉單聲道,轉標準WAV,轉PCM

本文為使用FFMPEG命令行的方式處理音頻&#xff0c;來獲取想要得到的音頻文件。 零、使用命令行查看編碼封裝信息 格式&#xff1a;ffprobe.exe -show_format inputfile 例子&#xff1a;ffprobe.exe -show_format .\stereo_44_16bit.wav 運行結果為下圖&#xff1a; 如圖可…

C# Channel實現線程間通信

C# Channel實現線程間通信 同步方式實現&#xff1a; using System; using System.Collections.Concurrent; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading; using System.Threading.Channels; using System.Threading.T…

【JavaFX】實現計算器小程序

下面是一個簡單的JavaFX計算器示例: import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.…

西南科技大學數字電子技術實驗四(基本觸發器邏輯功能測試及FPGA的實現)預習報告

一、計算/設計過程 說明:本實驗是驗證性實驗,計算預測驗證結果。是設計性實驗一定要從系統指標計算出元件參數過程,越詳細越好。用公式輸入法完成相關公式內容,不得貼手寫圖片。(注意:從抽象公式直接得出結果,不得分,頁數可根據內容調整) (1)D觸發器 特征方程: Q…

往adobe illustrator中添加latex字體

找到如下字體所在路徑 /path/to/miktex/type1\public\amsfonts\cm然后copy相應的字體文件 cmmi10.pfb將相應的pfb文件復制到Adobe illustrator字體文件夾: /path/to/illustrator/Support Files/Required/Fonts然后重啟即可。

ChatGPT/GPT4應用:文本、論文、編程、繪圖等,提高工作效率及科研項目開發能力

2023年隨著OpenAI開發者大會的召開&#xff0c;最重磅更新當屬GPTs&#xff0c;多模態API&#xff0c;未來自定義專屬的GPT。微軟創始人比爾蓋茨稱ChatGPT的出現有著重大歷史意義&#xff0c;不亞于互聯網和個人電腦的問世。360創始人周鴻祎認為未來各行各業如果不能搭上這班車…

排序-選擇排序與堆排序

文章目錄 一、選擇排序二、堆排序三、時間復雜度四、穩定性 一、選擇排序 思想&#xff1a; 將數組第一個元素作為min&#xff0c;然后進行遍歷與其他元素對比&#xff0c;找到比min小的數就進行交換&#xff0c;直到最后一個元素就停止&#xff0c;然后再將第二個元素min&…

【單調棧】【二分查找】LeetCode: 2454.下一個更大元素 IV

作者推薦 【動態規劃】【廣度優先】LeetCode2258:逃離火災 本文涉及的基礎知識點 二分查找算法合集 單調棧 題目 給你一個下標從 0 開始的非負整數數組 nums 。對于 nums 中每一個整數&#xff0c;你必須找到對應元素的 第二大 整數。 如果 nums[j] 滿足以下條件&#xff…

音視頻技術開發周刊 | 323

每周一期&#xff0c;縱覽音視頻技術領域的干貨。 新聞投稿&#xff1a;contributelivevideostack.com。 Meta牽頭組建開源「AI復仇者聯盟」&#xff0c;AMD等盟友800億美元力戰OpenAI英偉達 超過50家科技大廠名校和機構&#xff0c;共同成立了全新的人工智能聯盟。以開源為旗號…

RocketMQ的架構是什么樣的?

RocketMQ&#xff0c;作為一款強大的分布式消息中間件&#xff0c;廣泛應用于各種大規模分布式系統中&#xff0c;為異步消息通信提供了可靠的解決方案。本文將深入探討RocketMQ的核心組件&#xff0c;包括Producer、Broker、Consumer和NameServer&#xff0c;以及它們在整個架…

高中物理電學總結之穩恒電流篇

高中物理電學總結之穩恒電流篇 電流電流的定義對電流的微觀分析 電阻歐姆定律電阻的串并聯電阻定律 電源的電動勢電源電動勢 閉合電路歐姆定律閉合電路閉合電路歐姆定律 電流做功與焦耳定律電流做功電功率焦耳定律電源效率 電表改裝 電流 電流的定義 電解質溶液中的自由電荷是…

ACwing算法備戰藍橋杯——Day30——樹狀數組

定義&#xff1a; 樹狀數組是一種數據結構&#xff0c;能將對一個區間內數據進行修改和求前綴和的這兩種操作的最壞時間復雜度降低到O(logn); 實現所需變量 變量名變量數據類型作用數組a[]int存儲一段區間數組tr[]int表示樹狀數組 主要操作 函數名函數參數組要作用lowbit()int…

Linux-RedHat系統-安裝 中間件 Tuxedo

安裝步聚 一、中間件安裝包&#xff1a; tuxedo121300_64_Linux_01_x86 Tuxedo下載地址&#xff1a; Oracle Tuxedo Downloads 二、新建用戶&#xff1a; &#xff08;創建Oracle用戶時&#xff0c;需要root權限操作&#xff09; 創建用戶&#xff1a; # useradd oracle …

es6從url中獲取想要的參數

第一種方法 很古老&#xff0c;通過 split 方法慢慢截取&#xff0c;可行是可行但是這個方法有一個弊端&#xff0c;因為 split 是分割成數組了&#xff0c;只能按照下標的位置獲取值&#xff0c;所以就是參數位置一旦發生變化&#xff0c;那么獲取到的值也就錯位了 let user…

利用python將data:image/jpg; base64,格式數據轉化下載為圖片

在做爬蟲爬取圖片時&#xff0c;發現有的圖片url是用“data:image/jpg;base64” 開頭的&#xff0c;例如下圖 部分開頭樣式如下&#xff1a; 1、data:image/jpg; base64, 2、data:image/png; base64, 3、data:image/webp;base64, 利用python進行代碼進行圖片下載&#xff0c;…

面向對象設計與分析40講(22)罪惡的單例模式?

單例模式曾經被認為是一種重要的設計模式&#xff0c;但現在已經失去了很多開發者的青睞。雖然單例模式可能仍然適用于某些場景&#xff0c;但它的使用已經不再像過去那樣普遍了。 單例模式是創建型設計模式的一種&#xff0c;它限制了一個類的實例化只能為一個實例&#xff0…

先進的Web3.0實戰熱門領域NFT項目幾個總結分享

非同質化代幣&#xff08;NFT&#xff09;的崛起為游戲開發者提供了全新的機會&#xff0c;將游戲內物品和資產轉化為真正的可擁有和交易的數字資產。本文將介紹幾個基于最先進的Web3.0技術實踐的NFT游戲項目&#xff0c;并分享一些相關代碼。 Axie Infinity&#xff08;亞龍無…

智能優化算法應用:基于貓群算法3D無線傳感器網絡(WSN)覆蓋優化 - 附代碼

智能優化算法應用&#xff1a;基于貓群算法3D無線傳感器網絡(WSN)覆蓋優化 - 附代碼 文章目錄 智能優化算法應用&#xff1a;基于貓群算法3D無線傳感器網絡(WSN)覆蓋優化 - 附代碼1.無線傳感網絡節點模型2.覆蓋數學模型及分析3.貓群算法4.實驗參數設定5.算法結果6.參考文獻7.MA…

C++ extern “C“ 用法

extern “C” 由于c中需要支持函數重載&#xff0c;所以c和c中對同一個函數經過編譯后生成的函數名是不相同的 extern “C” 的主要作用就是為了實現c代碼能夠調用其他 c 語言代碼。 1(不常用) //告訴編譯器 show() 函數按c語言的方式進行編譯和鏈接 extern "C" voi…

MySQL數據庫概念與實踐

MySQL數據庫概念與實踐 1. 概念 MySQL是一種常用的關系型數據庫管理系統&#xff0c;具有豐富的功能和廣泛的應用。在本篇博客中&#xff0c;我們將介紹MySQL數據庫的一些重要概念和相關知識。 存儲引擎 存儲引擎是MySQL數據庫用于存儲、更新和查詢數據的技術實現方法。MyS…