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

news2024/9/21 18:57:22

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

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

相关文章

ReactJS和VueJS的简介以及它们之间的区别

本文主要介绍ReactJS和VueJS的简介以及它们之间的区别。 目录 ReactJS简介ReactJS的优缺点ReactJS的应用场景VueJS简介VueJS的优缺点VueJS的应用场景ReactJS和VueJS的区别 ReactJS简介 ReactJS是一个由Facebook开发的基于JavaScript的前端框架。它是一个用于构建用户界面的库&…

C++ //例3.14 找出100~200间的全部素数。

C程序设计 &#xff08;第三版&#xff09; 谭浩强 例3.14 例3.14 找出100~200间的全部素数。 IDE工具&#xff1a;VS2010 Note: 使用不同的IDE工具可能有部分差异。 代码块 方法&#xff1a;使用函数的模块化设计 #include <iostream> #include <iomanip> #i…

2024年甘肃省职业院校技能大赛信息安全管理与评估赛项一阶段样题一

2024年甘肃省职业院校技能大赛高职学生组电子与信息大类信息安全管理与评估赛项样题一 竞赛需要完成三个阶段的任务&#xff0c;分别完成三个模块&#xff0c;总分共计 1000分。三个模块内容和分值分别是&#xff1a; 1.第一阶段&#xff1a;模块一 网络平台搭建与设备安全防…

0012Java安卓程序设计-ssm记账app

文章目录 **摘要**目 录系统设计5.1 APP端&#xff08;用户功能&#xff09;5.2后端管理员功能模块开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅&#x1f427;裙&#xff1a;776871563 摘要 网络的广泛应用给生活带来了十分的便利。所以把记账管理与现在网络相…

杰发科技AC7840——CAN通信简介(1)

简介 7840支持4路CAN-FD Demo调试 官网下载demo&#xff0c;烧录&#xff0c;打开串口发现打印如下。原因是没有连接CAN盒子&#xff0c;总线错误。 CAN收发器端波形 CAN_L有信号&#xff0c;CAN_H没有 波形放大 GPIO端波形 有持续波形输出 波形放大查看&#xff0c;有50U…

Python数据科学视频讲解:Python注释

2.3 Python注释 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解2.3节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学应用的全流程&#xff0c;包括数据科学应用和…

Java学习总结

1. Java集合体系框架 java.util中包含 Java 最常用的the collections framework。 Java集合类主要由两个根接口Collection和Map派生出来的。 Collection 接口派生出了三个子接口List、Set、Queue。Map 接口 因此Java集合大致也可分成List、Set、Queue、Map四种接口体系。 …

推荐算法:HNSW【推荐出与用户搜索的类似的/用户感兴趣的商品】

HNSW算法概述 HNSW&#xff08;Hierarchical Navigable Small Word&#xff09;算法算是目前推荐领域里面常用的ANN&#xff08;Approximate Nearest Neighbor&#xff09;算法了。其目的就是在极大量的候选集当中如何快速地找到一个query最近邻的k个元素。 要找到一个query的…

【ChatGLM3】第三代大语言模型多GPU部署指南

关于ChatGLM3 ChatGLM3是智谱AI与清华大学KEG实验室联合发布的新一代对话预训练模型。在第二代ChatGLM的基础之上&#xff0c; 更强大的基础模型&#xff1a; ChatGLM3-6B 的基础模型 ChatGLM3-6B-Base 采用了更多样的训练数据、更充分的训练步数和更合理的训练策略。在语义、…

2023 ACDU 中国行 · 西安站 | 数据库技术发展及实践

ACDU 中国行西安站由中国数据库联盟联合浪潮数据库等单位共同主办&#xff0c;特邀中国计算机学会&#xff08;CCF&#xff09;为本次活动的指导单位。 作为中国数据库联盟的品牌活动之一&#xff0c;【ACDU 中国行】在线下汇集数据库领域的行业知名人士&#xff0c;共同探讨数…

JIS-CTF

环境配置 正常打开虚拟机&#xff0c;找不到IP地址&#xff0c;解决方案是登录到靶机&#xff1a; 账号 technawi 口令 3vilHksor 然后启用网卡&#xff1a;sudo ifconfig ens33 up 分配IP&#xff1a;sudo dhclient 信息收集 # nmap -sn 192.168.1.0/24 -oN live.nmap …

【cocotb】【达坦科技DatenLord】Cocotb Workshop分享

https://www.bilibili.com/video/BV19e4y1k7EE/?spm_id_from333.337.search-card.all.click&vd_sourcefd0f4be6d0a5aaa0a79d89604df3154a 方便RFM实现 cocotb_test 替代makefile &#xff0c; 类似python 函数执行

pytest + yaml 框架 -59.用例失败重跑机制pytest-rerunfailures

前言 有些接口可能不太稳定&#xff0c;第一次跑的时候由于网络原因或者其它原因失败&#xff0c;但是重新跑2次又成功了。 对于这种需要重新跑几次的场景&#xff0c;可以使用用例失败重跑机制&#xff0c;需安装pytest-rerunfailures 插件。 场景示例 失败重跑需要依赖 py…

19 redis缓存数据同步问题

1、缓存穿透 指缓存和数据库中都没有的数据&#xff0c;而用户不断发起请求。由于缓存不命中&#xff0c;并且出于容错考虑&#xff0c;如果从存储层查不到数据则不写入缓存&#xff0c;这将导致这个不存在的数据每次请求都要到存储层去查询&#xff0c;缓存就没有意义了。 在…

[CQOI2014] 危桥

[CQOI2014] 危桥 题目描述 Alice 和 Bob 居住在一个由 \(N\) 座岛屿组成的国家&#xff0c;岛屿被编号为 \(0\) 到 \(N-1\)。某些岛屿之间有桥相连&#xff0c;桥上的道路是双向的&#xff0c;但一次只能供一人通行。其中一些桥由于年久失修成为危桥&#xff0c;最多只能通行两…

【sqli靶场】第二关和第三关通关思路

目录 前言 一、sqli靶场第二关 1.1 判断注入类型 1.2 判断数据表中的列数 1.3 使用union联合查询 1.4 使用group_concat()函数 1.5 爆出users表中的列名 1.6 爆出users表中的数据 二、sqli靶场第三关 2.1 判断注入类型 2.2 观察报错 2.3 判断数据表中的列数 2.4 使用union联合…

电脑出现错误0x80004005怎么解决,解决0x80004005的问题

当电脑出现0x80004005错误时&#xff0c;通常是由于系统或应用程序之间的通信问题或文件系统损坏引起的。该错误代码表示未指定错误&#xff0c;在Windows系统中较为常见。 一.解决0x80004005错误的步骤 重新启动电脑 有时候&#xff0c;错误只是一个暂时的问题&#xff0c;重…

C语言常用字符串

目录 1.什么是字符串 2.如何定义字符串 第3和第4定义的区别&#xff1a;3是字符串变量&#xff0c;4是字符串常量&#xff0c;不予许被修改 3.strlen和sizeof的区别 4.地址分配&#xff08;malloc,realloc,free,memset&#xff09; 案例 5.字符串拷贝(strcpy,strncpy) …

【docker】容器使用(Nginx 示例)

查看 Docker 客户端命令选项 docker上面这三张图都是 常用命令&#xff1a; run 从映像创建并运行新容器exec 在运行的容器中执行命令ps 列出容器build 从Dockerfile构建映像pull 从注册表下载图像push 将图像上载到注册表…

windows启动出现 zookeeper此处不应有java

可能是Java 路径出了问题&#xff0c;这个programFiles直接有空格&#xff0c;没错就有空格&#xff0c;笔者一开始以为这么点算什么空格&#xff0c;需要把这个对应的Java文件到别的英文路径下&#xff0c;并且修改环境变量。就可以启动的。 还可以启动方式有很多种&#xff0…