【css】用css样式快速写右上角badge徽标,颜色设置为渐变色

先看效果展示,已公开显示在图片卡片的右上角。
在这里插入图片描述

首先是dom代码:需要两个view或者div,public-badge是“已公开”那个矩形,show-signal是右边那个下三角,也就是阴影部分,这样看起来比较有立体感。

<view class="public-badge">已公开</view>
<view class="show-signal"></view>

这是css部分

.public-badge {text-align: center;// 设置渐变色背景background-image: linear-gradient(to right, #cde3e6, #999A9A), linear-gradient(100deg, #b3d5da, #8F41E9, #63acb6);color: #fff;font-size: 12px;width: 60px;border-radius: 3px 0 0 3px;position: absolute;top: 10px;right: -8px;z-index: 10;padding: 3px 0;
}.show-signal {border: 4px solid #939393;border-right: 4px solid transparent;border-bottom: 4px solid transparent;width: 0;height: 0;position: absolute;top: 31px;right: -8px;z-index: 10;
}

如果不生效的话,要注意一点,子节点用absolute定位的时候,父节点必须要用position:relative定位,否则absolute会层层往前找,直到找到一个relative的父节点,按照该节点进行定位。

博主会一直更新在真实项目中遇到的问题,请多关注。
更多关于uview组件的使用和uniapp、vue项目的实际演示效果请看:https://ext.dcloud.net.cn/plugin?id=12603。

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

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

相关文章

虚拟化技术及实时虚拟化概述

版权声明&#xff1a;本文为本文为博主原创文章&#xff0c;未经本人同意&#xff0c;禁止转载。如有问题&#xff0c;欢迎指正。博客地址&#xff1a;https://www.cnblogs.com/wsg1100/ 文章目录 一、前言二、分时系统三、虚拟化介绍四、虚拟化实现方式及分类模拟器Type2虚拟化…

欧姆龙PLC联网

一、设备信息确认 左上角的为PLC型号,如图该PLC型号为CP1H,不同型号的欧姆龙PLC通讯方面有什么差别呢? 通讯能力和方式不同: 有些型号PLC自带网口,有些则需要扩展(上图中右侧的两个红框内为后扩展的通讯口,扩展模块可以随意组合双网口,双232串口,双485串口都可以)…

JDBC编程连接MySQL数据库遇到的两个错误

在进行java与MySQL数据库进行连接的时候我遇到了两个报错&#xff0c;在一开始的时候遇到的报错是Access denied for user yulinlocalhost (using password: YES)&#xff0c;此时我在网络上搜索发现是密码出现错误的问题&#xff08;出现该问题确实是密码错误&#xff09;&…

【DevOps】Atlassian插件开发指南

本文以Bamboo插件开发为例&#xff0c;记录一下插件开发过程。 一、简介 Atlassian Bamboo 6.9.1 是一款持续集成和持续交付&#xff08;CI/CD&#xff09;工具&#xff0c;支持使用插件扩展其功能。如果需要开发自己的 Bamboo 插件并添加到 Bamboo 中&#xff0c;则可以参考…

设计模式——享元模式

享元模式 定义 享元模式&#xff08;Flyweight Pattern&#xff09;是池技术的重要实现方式。 使用共享对象可以有效地支持大量的细粒度对象。 优缺点、应用场景 优点 可以大大减少应用程序创建对象的数量&#xff0c;降低程序内存占用。 缺点 提高了系统的复杂度&…

spring-IOC

IOC容器 简介 IoC(Inversion of Control)控制反转&#xff0c;是一种基于面向对象编程法则的设计思想&#xff0c;它设计出的程序具有松耦合、更优良的特点。 IoC容器是Spring框架中重要的核心组件之一&#xff0c;贯穿了Spring从出生到成长的整个过程&#xff0c;Spring通过I…

零基础学习,轻松打造物业服务小程序

现如今&#xff0c;物业服务已经成为了人们生活中不可或缺的一部分。为了更好地满足人们对物业服务的需求&#xff0c;许多企业和个人开始开发物业服务小程序&#xff0c;以便提供更加便捷和高效的服务。然而&#xff0c;对于大多数人来说&#xff0c;搭建一个小程序可能需要一…

智能ai绘画软件帮你用科技点亮创意火花

李明&#xff1a;嘿&#xff0c;你听说过ai绘画软件吗&#xff1f;我最近对数字艺术产生了浓厚的兴趣 王磊&#xff1a;当然&#xff01;ai绘画软件真是太神奇了&#xff01;它可以将抽象的文字描述转换成惊人的艺术作品。 李明&#xff1a;是吗&#xff1f;它们绘制的效果怎…

数据库及数据表的相关操作(一)

目录 概念知识一、管理逻辑库与数据表二、常用数据类型和约束2.1 数字数据类型2.2 字符串数据类型2.3 日期数据类型2.4 字段约束 三、索引运行机制和使用原则3.1 创建索引3.2 添加与删除索引3.3 索引的使用原则 概念知识 关系型数据库&#xff1a; 使用了关系模型的数据库系统&…

深度学习——CNN卷积神经网络

基本概念 概述 卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;是一种深度学习中常用于处理具有网格结构数据的神经网络模型。它在计算机视觉领域广泛应用于图像分类、目标检测、图像生成等任务。 核心思想 CNN 的核心思想是通过利用局部…

Linux内核源代码的目录结构包括部分:

内核核心代码&#xff1a;这部分代码包括内核的各个子系统和模块&#xff0c;如进程管理、内存管理、文件系统、网络协议栈等。这些代码构成了Linux内核的核心功能。 非核心代码&#xff1a;除了核心代码之外&#xff0c;还包括一些非核心的代码和文件&#xff0c;如库文件、固…

和chatgpt学架构03-引入UI框架(elment-plus)

目录 1 项目目录及文件的具体作用1.1 App.vue1.2 main.js的作用1.3 main.js什么时候被调用1.4 npm run serve干了什么事情1.5 package.json的作用 2 安装UI框架2.1 安装命令2.2 全局引入 3 启动工程总结 我们已经安装好了我们的vue脚手架&#xff0c;用vscode打开工程目录 要自…

【FPGA】基于C5的第一个SoC工程

文章目录 前言SoC的Linux系统搭建 前言 本文是在毕业实习期间学习FPGA的SoC开发板运行全连接神经网络实例手写体的总结。 声明&#xff1a;本文仅作记录和操作指南&#xff0c;涉及到的操作会尽量细致&#xff0c;但是由于文件过大不会分享文件&#xff0c;具体软件可以自行搜…

Leetcode-每日一题【109.有序链表转换二叉搜索树】

题目 给定一个单链表的头节点 head &#xff0c;其中的元素 按升序排序 &#xff0c;将其转换为高度平衡的二叉搜索树。 本题中&#xff0c;一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差不超过 1。 示例 1: 输入: head [-10,-3,0,5,9]输出: [0,-3,9,-…

VS报错E1696 无法打开类似于stdio.h等头文件的解决办法

VS报错E1696 无法打开类似于stdio.h等头文件的解决办法 我的VS版本是2022的&#xff0c;然后我今天把同事在VS2017上的code&#xff08;一个完整的解决方案&#xff09;从svn上拿过来。结果发现&#xff0c;一大堆E1696的错误。主要表现就是项目中include的一些常用的c语言基础…

算法竞赛字符串常用操作大全

算法竞赛字符串常用操作总结来啦~ &#x1f44a; 大家好 我是寸铁&#x1f4aa; 考前需要刷大量真题,大家一起相互监督&#xff0c;每日做N题&#xff0c;一起上岸吧✌️ ~ 冲刺蓝桥杯省一模板大全来啦 &#x1f4a5; ~ 蓝桥杯4月8号就要开始了 &#x1f64f; ~ 还没背熟模…

字幕切分视频

Whisper 仓库地址&#xff1a; https://github.com/openai/whisper 可用模型信息&#xff1a; 测试视频&#xff1a;18段&#xff0c;总共447S视频&#xff08;11段前&#xff1a;有11段开头有停顿的视频&#xff09; Tiny: 跑完&#xff1a;142S &#xff0c;11段前&#xf…

(栈队列堆) 剑指 Offer 09. 用两个栈实现队列 ——【Leetcode每日一题】

❓ 剑指 Offer 09. 用两个栈实现队列 难度&#xff1a;简单 用两个栈实现一个队列。队列的声明如下&#xff0c;请实现它的两个函数 appendTail 和 deleteHead &#xff0c;分别完成在队列尾部插入整数和在队列头部删除整数的功能。(若队列中没有元素&#xff0c;deleteHead …

vscode远程连接提示:过程试图写入的管道不存在(删除C:\Users\<用户名>\.ssh\known_hosts然后重新连接)

文章目录 复现过程原因解决方法总结 复现过程 我是在windows上用vscode远程连接到我的ubuntu虚拟机上&#xff0c;后来我的虚拟机出了点问题&#xff0c;我把它回退了&#xff0c;然后再连接就出现了这个问题 原因 本地的known_hosts文件记录服务器信息与现服务器的信息冲突了…

虚拟机挂载USB设备/USB serial 连接开发板

虚拟机挂载USB设备 1、添加USB设备 2、终端输入&#xff1a;sudo fdisk -l 查看Device设备&#xff1a; 3、创建挂载目录&#xff1a;mkdir /mnt/usb 4、执行挂载命令&#xff1a;sudo mount /dev/sdb1 /mnt/usb ,查看/mnt/usb目录下是否存在U盘中的数据&#xff1a; 5、用…