【CSS】用 CSS 写一个渐变色边框的输入框

news2024/12/24 8:50:55

在这里插入图片描述
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.coloradmin.cn/o/1314931.html

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

相关文章

【unity小技巧】两种办法解决FPS游戏枪或者人物穿墙穿模问题

文章目录 前言第一种解决思路第二种方法总结感谢完结 前言 当我们开发FPS游戏时&#xff08;其实3d游戏基本都会遇到这样的问题&#xff09;&#xff0c;如果我们不做处理&#xff0c;肯定会出现人物或者枪的穿墙穿模问题&#xff0c;这是是一个常见的挑战。 这种问题会破坏…

Flink窗口的概念和分类

窗口的概念 Flink是一种流式计算引擎&#xff0c;主要是来处理无界数据流的&#xff0c;数据源源不断、无穷无尽。想要更加方便高效地处理无界流&#xff0c;一种方式就是将无限数据切割成有限的“数据块”进行处理&#xff0c;这就是所谓的“窗口”&#xff08;Window&#x…

指针相关知识(进阶)

前面的入门中已经介绍了指针的基础知识&#xff0c;接下来&#xff0c;让我们继续学习吧&#xff01; 一. 字符指针变量 char* 一般形式 int main() {char n w;char* pa &n;*pa w;return 0; } 这并不是把字符串hello world放在n中&#xff0c;而是把第一个字符的地址…

【论文解读】System 2 Attention提高大语言模型客观性和事实性

一、简要介绍 本文简要介绍了论文“System 2 Attention (is something you might need too) ”的相关工作。基于transformer的大语言模型&#xff08;LLM&#xff09;中的软注意很容易将上下文中的不相关信息合并到其潜在的表征中&#xff0c;这将对下一token的生成产生不利影响…

LeetCode day24

LeetCode day24 今天主打一个快乐happy(▽ʃ♡ƪ)&#xff0c;主要是今天写哈夫曼树被经典文件读取坑麻了&#xff08;为啥绝对路径能读取&#xff0c;相对不行。罢了&#xff09; 一个中等题&#xff0c;但是咋感觉很小学捏。。。 2177. 找到和为给定整数的三个连续整数 相…

320科技工作室ZEMAX培训通知

一 软件介绍 ZEMAX是一套综合性的光学设计软件。它提供先进的、且符合工业标准的分析、优化、公差分析功能&#xff0c;能够快速准确的完成光学成像及照明设计。 二 培训方式 本次培训全程线上授课, 采用一对一或者一对多方式进行, 以视频方式授课&#xff0c;工程案例讲解&…

自动化测试(三)webdriver的常用api(1)

目录 等待 sleep休眠 隐式等待 显式等待 打印信息 打印title 打印url 浏览器的操作 浏览器最大化 设置浏览器宽、高 操作浏览器的前进、后退 控制浏览器滚动条 键盘事件 键盘按键用法 键盘组合键用法 鼠标事件 定位一组元素 前面两章我们讲了selenium环境的…

初识JVM底层知识,一文读懂JVM知识文集。

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

基于ssm医用物理学实验考核系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本医用物理学实验考核系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数…

什么是前端国际化(internationalization)和本地化(localization)?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

北斗卫星在城市管网系统中的应用

北斗卫星在城市管网系统中的应用 北斗卫星是我国自主研发的卫星导航系统&#xff0c;已经应用于各个领域。而在城市管网系统中&#xff0c;北斗卫星也有着重要的应用。本文将详细介绍北斗卫星如何应用于城市管网系统&#xff0c;以及其所带来的优势和作用。 在城市管网系统中&a…

RK3568/RV1126/RV1109/RV1106 ISP调试方案

最近一直在做瑞芯微rv1126的开发&#xff0c;由于项目性质&#xff0c;与camera打的交道比较多&#xff0c;包括图像的采集&#xff0c;ISP处理&#xff0c;图像处理&#xff0c;H.264/H.265编解码等各个方面吧。学到了不少&#xff0c;在学习的过程中&#xff0c;也得到了不少…

UE5 Landscaping MapBox 学习笔记

1. Landscaping MapBox 操作录屏 https://www.bilibili.com/video/BV113411U7T9/?spm_id_from333.337.search-card.all.click&vd_source707ec8983cc32e6e065d5496a7f79ee6 安装Landscaping与LandscapingMapbox两个插件 打开Landscaping窗口&#xff0c;这里应该要在Proj…

源于自然感受好眠,GMN双子座深睡科技新品发布会愉悦亮相

2023年12月12日&#xff0c;中国成都——“睡眠愉悦领域专家”GMN双子座&#xff0c;以“睡不着贴双子座”为主题召开品牌正式成立后的首次线下发布会。品牌敏锐洞察现代人的睡眠困境&#xff0c;并始终致力于以自然与科技为基础&#xff0c;为大众带来自然愉悦的睡眠体验&…

彻底告别pip安装Python第三方库网速慢的问题

方式一、 如果使只下载没几个库 直接: pip install 库名 -i http://mirrors.aliyun.com/pypi/simple/ 方式二、 如果要一直下载库&#xff0c;就可以通过配置pip.ini文件来解决&#xff0c;具体步骤如下所示&#xff1a; 1、打开文件资源管理器 2、搜索%APPDATE% 3、创建一…

Excel实现字母+数字拖拉自动递增,步长可更改

目录 1、带有字母的数字序列自增加&#xff08;步长可变&#xff09; 2、仅字母自增加 3、字母数字同时自增 1、带有字母的数字序列自增加&#xff08;步长可变&#xff09; 使用Excel通常可以直接通过拖拉的方式&#xff0c;实现自增数字&#xf…

消息队列kafka详解:Kafka架构介绍

一. 工作流程 Kafka中消息是以topic进行分类的&#xff0c;Producer生产消息&#xff0c;Consumer消费消息&#xff0c;都是面向topic的。 Topic是逻辑上的改变&#xff0c;Partition是物理上的概念&#xff0c;每个Partition对应着一个log文件&#xff0c;该log文件中存储的就…

UE5 PlaceActor

⚠️ 重点 PlaceActors 需在引擎初始化之后 但&#xff0c;单为这一个功能&#xff0c;更改整个模块的启动顺序&#xff0c;也不太划算 更好的办法是&#xff0c;启动顺序保持正常&#xff08;如"LoadingPhase": "Default" &#xff09;&#xff0c;然后…

verilog语法基础-移位寄存器

概述&#xff1a; 移位寄存器在数字电路设计中广泛被使用&#xff0c;列如SPI通讯中的串行输入并行输出&#xff0c;并行输出串行输出&#xff0c;FIR滤波器中作为数据的延迟链&#xff0c;边沿检测中的数据延迟链等等。本节针对移位寄存器的基本应用场景给出基本的模版&#…

SpringMVC上传下载文件解读

知识点 文件上传&#xff08;File Upload&#xff09;&#xff1a; 创建一个控制器方法&#xff0c;使用 MultipartFile 参数来接收上传的文件。在 Spring 配置文件中配置一个 MultipartResolver&#xff0c;常用的实现类是 CommonsMultipartResolver。在 MultipartResolver …