【CSS】用 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/226192.shtml

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

相关文章

uniapp实现检查版本检测,更新

1.首先需要获取当前app的版本 const systemInfo uni.getSystemInfoSync();// 应用程序版本号// #ifdef APPme.version systemInfo.appWgtVersion;// #endif// #ifdef H5me.version systemInfo.appVersion;// #endif2.在获取到服务器保存的app版本 3.点击按钮验证版本号 //…

JS的箭头函数this:

箭头函数不会创建自己的this&#xff0c;它只会从自己的作用域链的上一层沿用this。 具体看实例&#xff1a; //以前&#xff1a;谁调用的这个函数 this就指向谁// console.log(this);//window// function fn(){// console.log(this);//window 因为这个函数也是window调用…

lwIP 细节之五:accept 回调函数是何时调用的

使用 lwIP 协议栈进行 TCP 裸机编程&#xff0c;其本质就是编写协议栈指定的各种回调函数。将你的应用逻辑封装成函数&#xff0c;注册到协议栈&#xff0c;在适当的时候&#xff0c;由协议栈自动调用&#xff0c;所以称为回调。 注&#xff1a;除非特别说明&#xff0c;以下内…

k8s-deployment initcontainers提前监测svc可用

背景&#xff1a;项目deploy需要依赖svc启动&#xff0c;但是k8s启动deploy是无序的&#xff0c;就需要人为控制 Init Container 应用场景 讲解了 Init Container 的使用&#xff0c;接下来介绍 Init Container 有哪些应用场景。 在很多的应用场景中&#xff0c;应用在启动之…

车载以太网-DoIP

文章目录 车载以太网DoIP协议(Diagnostics over Internet Protocol)DoIP协议的报文格式DoIP报文类型DoIP协议的完整流程车载以太网DoIP协议(Diagnostics over Internet Protocol) 车载以太网DoIP协议(Diagnostics over Internet Protocol)是一种用于车辆诊断的网络协议,…

Python中类与对象

一、前言 面向对象是一种设计哲学和方法论。它并非必需&#xff0c;不使用面向对象也可以编程。但有了面向对象&#xff0c;可以把程序组织得更有条理&#xff0c;让设计过程更加愉悦和轻松。面向对象&#xff1a;再解决问题的时候关注的是解决问题所需要的对象。 Python是一种…

2024GoCN线下活动全面启动,赠送深圳MeetUp门票

2024年GoCN社区将全面启动一系列令人期待的线下活动---不仅将在北京、上海、深圳、武汉、成都、杭州、广州、西安等地举办 meetup&#xff0c;还将在北京和上海举办 GopherChina 大会。 2024议题征集通道已开启&#xff0c;欢迎各位有实战经验、独特观点的Gopher前来分享~ 2024…

@RestController

1、RestController说明 RestController是 Spring Framework 4.0 引入的一个注解&#xff0c;用于将一个类标记为 Rest 控制器。它是Controller和ResponseBody注解的组合&#xff0c;使得使用该注解的类在处理 HTTP 请求时更加方便和简洁。 RestController注解由以下几个部分组…

Anaconda中使用Jupyter出现’No module named ‘pymysql‘问题解决

问题截图&#xff1a; 解决办法&#xff1a; 一.找到Anaconda所在文件夹&#xff0c;文件夹处输入 cmd 进入命令控制 二. 在打开的cmd中输入‘conda install pymysql’ 三、输入y 安装完成~ 测试&#xff1a; import pandas as pd from sqlalchemy import create_engine …

EAM系统在地铁设备管理中的应用

在现代城市的交通系统中&#xff0c;地铁作为一种高效、快速、可靠的公共交通工具&#xff0c;扮演着至关重要的角色。为了确保地铁系统的正常运行和可靠性&#xff0c;地铁管理部门需要有效地管理大量的设备和设施。在这个过程中&#xff0c;企业资产管理&#xff08;EAM&…

Python个人代码随笔(观看无益,请跳过)

异常抛错&#xff1a;一般来说&#xff0c;在程序中&#xff0c;遇到异常时&#xff0c;会从这一层逐层往外抛错&#xff0c;一直抛到最外层&#xff0c;由最外层把错误显示在用户终端。 try:raise ValueError("A value error...") except ValueError:print("V…

MVC框架和Spring MVC的基本流程

MVC&#xff08;Model-View-Controller&#xff09;是一种设计模式&#xff0c;用于将应用程序的逻辑分离为三个不同的组件&#xff1a;模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Controller&#xff09;。MVC框架的原理是基于…

linux源码包管理

8.2 源码包管理 source code需要经过GC,C编译环境编译才能运行 ​ 可以设定个人设置&#xff0c;但配置复杂 ​ 软件包示例: nginx-1.8.1.tar.gz -----------------------------------------------------------------------------------------------------------------------…

企业与员工

相信大家最近都关注到了董宇辉这件事,在看“热闹”的同时,我们也要关注到事情的本质。最后回到根本,归根到底就是企业与员工。 在此之前,我们先一起回顾一下历史,当然,以下内容都是我根据老一辈的分享以及历史资料做出来的总结: 我们新中国成立,经历了很多事情,特别是…

Event Driven设计模式

EDA&#xff08;Event-Driven Architecture&#xff09;是一种实现组件之间松耦合、易扩展的架构方式。一个最简单的EDA设计需要包含如下几个组件&#xff1a; Events&#xff1a;需要被处理的数据。一个Event至少包含两个属性&#xff0c;类型和数据&#xff0c;类型决定了Eve…

知识付费小程序开发:构建个性化学习平台的技术实践

随着在线学习和知识付费的兴起&#xff0c;开发一款知识付费小程序成为了创新的热点之一。本文将通过使用Node.js、Express和MongoDB为例&#xff0c;演示如何构建一个基础的知识付费小程序后端&#xff0c;并实现用户认证和知识内容管理。 1. 初始化项目 首先&#xff0c;确…

CSS复合选择器(在基础选择器上元素选择的方式不同)

后代选择器&#xff1a; ------------ 此情况下&#xff0c;红色的可以划去 子&#xff08;元素&#xff09;选择器&#xff1a; 并集选择器&#xff1a; 伪类选择器&#xff1a; 如放上字符会变色。 链接伪类选择器&#xff1a; foucus伪类选择器&#xff1a;

matplotlib如何在label中加入字符并换行【已解决】

最近在跑一个超参数的实验&#xff0c;但是发现x轴的刻度就很丑 显然&#xff0c;lr和theta在一行显得很冗余 这个是此时的label x_labels [$\t{lr0.05}\ \tθ10}$, 40, 60] 正常加换行符即可&#xff0c;但是要加上$$ x_labels [$\t{lr0.05}\ $\n$ \tθ10}$, 40, 60] 大…

听力健康“吃”出来

大多数的研究报告都指出&#xff0c;听力下降的最常见原因是年龄和噪音暴露。然而&#xff0c;近年来越来越多的文章开始探讨其他因素对听力的影响。食物不仅是维持人类基本生存的必需品&#xff0c;随着营养学的进步&#xff0c;人们也逐渐认识到食物中的营养与保持健康之间存…

zabbix6入门到精通(3) 预处理

zabbix6入门到精通&#xff08;3&#xff09; 预处理 配置 — 主机 文件系统主项目 vfs.fs.get 测试一下 添加预处理 $[?(.fsname ‘/’)] $[0].inodes.pfree JSONPath参照&#xff1a; https://www.zabbix.com/documentation/6.0/zh/manual/config/items/preprocessi…