用 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.mzph.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; 如图可…

西南科技大学数字电子技术实验四(基本触发器逻辑功能测试及FPGA的实现)预习报告

一、计算/设计过程 说明:本实验是验证性实验,计算预测验证结果。是设计性实验一定要从系统指标计算出元件参数过程,越详细越好。用公式输入法完成相关公式内容,不得贴手写图片。(注意:从抽象公式直接得出结果,不得分,页数可根据内容调整) (1)D触发器 特征方程: Q…

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;共同成立了全新的人工智能联盟。以开源为旗号…

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;…

先进的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…

件夹和文件比较软件VisualDiffer mac功能介绍

VisualDiffer mac是一款运行在MacOS上的文件夹和文件快速比较工具。VisualDiffer可以对不同文件夹中文件或文档做出比较或者比较两个文件的路径。还可以通过UNIS diff命令快速、标准和可靠的比较出各类不同的文件夹和文件结果&#xff0c;使用不同的颜色直观地显示。 VisualDif…

酷滴科技出席浦发银行第七届国际金融科技创新大赛

12月7日&#xff0c;浦发银行全球金融科技创新大赛在上海展开决赛。本届大会以“科技金融&#xff0c;激发创新力量”为主题&#xff0c;聚焦金融行业数字化转型过程中的痛点与难点&#xff0c;旨在探讨新时代下金融科技的新角色、新机遇以及新挑战。酷滴科技CEO张沈分享了酷滴…

12.11

1.q&#xff0c;w&#xff0c;e亮led1&#xff0c;2&#xff0c;3&#xff1b; a&#xff0c;s&#xff0c;d灭led1&#xff0c;2&#xff0c;3&#xff1b; main.c #include "uar1.h"#include "led.h"void delay(int ms){int i,j;for(i0;i<ms;i){for…

SQL中的三值逻辑:TRUE、FALSE 和 UNKNOWN。

在SQL中&#xff0c;通常采用三值逻辑处理条件表达式的真值。这种逻辑是基于三种可能的真值状态&#xff1a;TRUE、FALSE 和 UNKNOWN。 TRUE&#xff08;真&#xff09;&#xff1a; 表示条件为真或成立。 FALSE&#xff08;假&#xff09;&#xff1a; 表示条件为假或不成立。…

7 Linux 内核移植

一、编译 ST 的 Linux 系统 1. 压缩源码 首先先下载 ST 官方源码&#xff0c;之前章节已经下载过了&#xff0c;直接输入以下命令&#xff1a; cd linux/atk-mpl/stm32mp1-openstlinux-5.4-dunfell-mp1-20-06-24/sources/arm-ostl-linux-gnueabi/linux-stm32mp-5.4.31-r0/ 然…

EasyExcel使用模板导出复杂Excel

1&#xff09;添加easyexlce的依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.0.0-beta1</version> </dependency>2&#xff09;添加excel模板文件 实现的效果&#xff1a;…

打包less

接HTML和css之后对less进行打包 1.在之前的文件夹里的src文件夹创建一个less文件 2.打开webpack——>中文文档——>Loader——>less—loader 3.复制下图代码到终端 4.复制下图内容到webpack.config.js脚本 5.在src里的js文件年引入less文件 6.在终端运行 npm run te…

助力工业生产质检,基于轻量级yolov5-seg开发构建工业场景下滚珠丝杠传动表面缺陷分割检测系统

AI赋能工业生产是一个强有力的方式&#xff0c;在我们之前的系列博文中也有很多相应的开发实践&#xff0c;感兴趣的胡都可以自行移步阅读&#xff0c;本文的核心思想就是想要基于轻量级的实例分割模型来开发构建工业场景下的滚珠丝杠传动表面缺陷分割检测系统&#xff0c;首先…

STM32-固件打包部署

STM32-固件打包部署 Fang XS.1452512966qq.com STM32固件输出 工程上使用Keil开发STM32软件&#xff1b;在调试过程中&#xff0c;可直接编译下载&#xff1b;例如bootloader和APP&#xff0c;在调试时&#xff0c;可以直接下载2次&#xff1b;但是工程上&#xff0c;需要大…

力扣经典面试题——合并区间

合并区间 https://leetcode.cn/problems/merge-intervals/description/?envTypestudy-plan-v2&envIdtop-interview-150 这题思维量一般但比较考察API的使用。 1、数组的自定义排序 2、数组的初始化定义 3、Arrays转int 通过重写Comparator的compare方法来自定义排序规则…