【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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/247708.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024美赛备战-美赛必备技能(matlab 和SPSS入门必备)

( 一 )Matlab 1.数值计算和符号计算功能 Matlab 以矩阵作为数据操作的基本单位&#xff0c;它的指令表达式与数学、工程中 常用的符号、表达式十分相似&#xff0c;故用Matlab 来解算问题要比用C、FORTRAN 等 语 言完成相同的事情简捷得多&#xff0c;使学者易于学习和掌握…

python如何发送企业微信群消息

一、创建机器人&#xff0c;并获取webhook 1.1 进入企业微信中&#xff0c;添加群机器人&#xff0c;添加完成后可以获取到一个webhook的地址 1.2 群机器人企业微信接口的调用可以参考这个文件 https://developer.work.weixin.qq.com/document/path/99110#%E5%A6%82%E4%BD%…

【UE5.2】从零开始控制角色移动、游泳、下潜、上浮

目录 效果 步骤 一、项目准备 二、控制角色移动 三、控制角色游泳 四、实现角色潜水、上浮 五、解决在水面上浮的Bug 效果 步骤 一、项目准备 1. 新建一个空白工程&#xff0c;创建一个Basic关卡&#xff0c;添加第三人称游戏资源到内容浏览器 2. 在插件中启用“W…

[C++]——学习模板

了解模板——初阶 前言&#xff1a;一、模板1.1 什么是模板1.2 模板的概念1.3 模板可以做什么1.4 泛型模板 二、函数模板2.1 函数模板概念和格式2.2 函数模板原理2.3 函数模板实例化2.3.1 隐式实例化2.3.2 显式实例化 2.4 模板参数的匹配原则2.5 函数模板声明定义分离 三、类模…

YOLOv8改进 | 2023Neck篇 | 轻量级跨尺度特征融合模块CCFM(附yaml文件+添加教程)

一、本文介绍 本文给大家带来的改进机制是轻量级跨尺度特征融合模块CCFM&#xff08;Cross-Scale Feature Fusion Module&#xff09;其主要原理是&#xff1a;将不同尺度的特征通过融合操作整合起来&#xff0c;以增强模型对于尺度变化的适应性和对小尺度对象的检测能力。我将…

电子学会C/C++编程等级考试2021年03月(六级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:生日相同 2.0 在一个有180人的大班级中,存在两个人生日相同的概率非常大,现给出每个学生的名字,出生月日。试找出所有生日相同的学生。 时间限制:1000 内存限制:65536输入 第一行为整数n,表示有n个学生,n ≤ 180。此后每…

Linux中的fork()函数

目录 1.现象 2.如何实现的&#xff1f; 1.现象 1.fork()函数是用来创建一个字进程的&#xff1a; 如果这个进程是子进程&#xff0c;那么返回值返回0&#xff0c;如果是父进程的话&#xff0c;那么返回子进程的pid&#xff0c;以便父进程找到子进程&#xff0c;因为子进程的p…

理解数字化转型:3个阶段、2个分类和3类价值

导读&#xff1a;数字化转型是基于IT技术提供业务所需要的支持&#xff0c;让业务和技术真正产生交互而诞生的。我们可以从概念及内涵、分类、价值等多个维度来理解企业数字化转型。 01 数字化转型的概念及内涵 数字化转型运用5G、人工智能、大数据、云计算等新一代数字技术&a…

【信息学奥赛】拼在起跑线上,想入道就别落下自己!

编程无难事&#xff0c;只怕有心人&#xff0c;学就是了&#xff01; 文章目录 1 信息学奥赛简介2 信息学竞赛的经验回顾3 优秀参考图书推荐《信息学奥赛一本通关》4 高质量技术圈开放 1 信息学奥赛简介 信息学奥赛&#xff0c;作为全国中学生学科奥林匹克“五大学科竞赛”之一…

狗dog目标检测数据集VOC+YOLO格式1W+张

狗&#xff0c;是食肉目犬科 [11]犬属 [13]哺乳动物 [12]&#xff0c;别称犬&#xff0c;与马、牛、羊、猪、鸡并称“六畜” [13]。狗的体型大小、毛色因品种不同而不同&#xff0c;体格匀称&#xff1b;鼻吻部较长&#xff1b;眼呈卵圆形&#xff1b;两耳或竖或垂&#xff1b;…

你好!赫夫曼树【JAVA】

目录 1.简单介绍 2.术语 3.构建思路 4.创建节点类 5.创建赫夫曼树 6.前序遍历 7.小玩一把 1.简单介绍 赫夫曼树&#xff08;Huffman Tree&#xff09;又称最优二叉树&#xff0c;是一种带权路径长度最短的二叉树。它的构建主要用于数据压缩算法中&#xff0c;根据字…

k8s容器部署mysql5.7全流程分享

文章目录 一、前言二、打开dockerhub 看到mysql的版本为 5.7三、K8S 容器编排3.1、编写POD的相关信息3.2、编写mysql的data存储位置3.3、编写mysql的my.cnf的挂载文件3.4、编写mysql的service端口 四、启动并禁用root账户4.1 登录&#xff0c;默认密码1234564.2 配置账户权限 五…

CSS基础面试题

介绍一下标准css盒子模型与低版本IE的盒子模型&#xff1f; 标准盒子模型&#xff1a;宽度内容的宽度&#xff08;content&#xff09; border padding margin 低版本IE盒子模型&#xff1a;宽度内容宽度&#xff08;contentborderpadding&#xff09; margin box-sizing 属性…

GroupMixFormer:基于Group-Mix注意力的视觉Transformer

文章目录 摘要1、简介2、相关工作2.1、视觉转换器2.2、全面的自注意力建模 3、组混合注意力和GroupMixFormer3.1. 动机&#xff1a;从个体到群体3.2. GMA: 混合组以获得更好的注意力3.3. 架构配置 4、实验4.1、实现细节4.2. 与最先进模型的比较4.3. 消融实验 5、结论 摘要 htt…

Temu重启诉讼和Shein战火重燃?出海知识产权保护成焦点

撰稿 | 故里 来源 | 亿恩 12月14日&#xff0c;Temu在美重诉Shein称别无选择&#xff0c;并表示Shein反竞争行为愈演愈烈。 对此&#xff0c;一位接近Shein人士称&#xff0c;Temu不但一直大规模抄袭SHEIN自有品牌产品、持续进行不正当竞争&#xff0c;还颠倒黑白、贼喊捉贼&…

LVS负载均衡群集,熟悉LVS的工作模式,了解LVS的调度策略以及ipvsadm工具的命令格式

目录 一、什么是群集 群集的作用&#xff1a; 群集的目的是什么 根据群集所针对的目标差异&#xff0c;可分为三种类型 负载均衡群集&#xff08;LBC&#xff09;load balance cluster 高可用群集&#xff08;HAC&#xff09;high availability cluster 高性能运算群集&a…

模拟真实内网渗透过程

环境搭建 kali为cs服务器 win11为攻击者主机 DMZ模拟目标web服务器&#xff0c;配置两块网卡&#xff0c;一个连外网&#xff0c;一个连内网域控 最终要求在win11上使用cs对目标域控进行提权 实施过程 一、域控主机搭建域环境&#xff0c;DMZ主机加入域内 搭建域控 w…

SE考研真题总结(二)

接上条&#xff0c;今天继续更新~ SE考研真题总结&#xff08;一&#xff09;-CSDN博客文章浏览阅读340次&#xff0c;点赞6次&#xff0c;收藏11次。本帖开始分享考研真题中设计【软件工程】的部分&#xff0c;预计会出5期左右&#xff0c;敬请期待~https://blog.csdn.net/js…

ububtu16.04下安装MQTT服务器

1、mqtt服务器安装 直接上root用户&#xff0c;顺序执行以下命令完成服务器安装&#xff1a; sudo apt-add-repository ppa:mosquitto-dev/mosquitto-ppa sudo apt-get update sudo apt-get install mosquitto …

P21 类神经网络训练不起来怎么办- 自动调整学习率 Adapative learning rate

梯度大&#xff0c;学习率减小梯度小&#xff0c;学习率变大adam随时间变化 &#xff0c; decay / warm up 调整学习率方法一 adagrad 学习率除以 梯度的方差 方法二 RMSProp 目前最常用的&#xff1a; Adam: RMSProp Moment Learning rate schedule : decay/ warm up l…