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

这篇具有很好参考价值的文章主要介绍了【css】用css样式快速写右上角badge徽标,颜色设置为渐变色。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先看效果展示,已公开显示在图片卡片的右上角。
【css】用css样式快速写右上角badge徽标,颜色设置为渐变色,前端,VUE,微信小程序,css,前端

首先是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。文章来源地址https://www.toymoban.com/news/detail-584240.html

到了这里,关于【css】用css样式快速写右上角badge徽标,颜色设置为渐变色的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp&&微信小程序点击右上角菜单分享功能权限配置

    个人项目地址: SubTopH前端开发个人站   (自己开发的前端功能和UI组件,一些有趣的小功能,感兴趣的伙伴可以访问,欢迎提出更好的想法,私信沟通,网站属于静态页面) SubTopH前端开发个人站 https://subtop.gitee.io/subtoph.github.io/#/home 点击右上角...配置发送给朋友和分享到朋

    2024年02月09日
    浏览(55)
  • 微信小程序分享(禁用分享,自定义分享禁用右上角...分享)

    1. 禁用分享 2.自定义分享 button class=\\\"share-button\\\" open-type=\\\"share\\\"/button 给button标签添加open-type=\\\"share\\\"属性,在点击按钮时候自动触发页面内的onShareAppMessage函数 如果你只想在点击按钮是触发分享,这是可以禁用右上角...中的分享  

    2024年02月06日
    浏览(59)
  • pyqt5 QWidget 如何隐藏右上角的关闭和提示按钮

    在 PyQt5 中,隐藏 QWidget 右上角的关闭按钮(也称为窗口关闭按钮)可以通过修改窗口的窗口标志位(WindowFlags)来实现。具体如下: import sys from PyQt5.QtWidgets import QApplication, QWidget class MyWidget(QWidget):     def __init__(self):         super().__init__()         self.initUI()     de

    2024年02月14日
    浏览(50)
  • 记录--优雅解决uniapp微信小程序右上角胶囊菜单覆盖问题

    大家好,今天聊一下在做uniapp多端适配项目,需要用到自定义导航时,如何解决状态栏塌陷及导航栏安全区域多端适配问题,下文只针对H5、APP、微信小程序三端进行适配,通过封装一个通用高阶组件包裹自定义导航栏内容,主要是通过设置padding来使内容始终保持在安全区域

    2024年02月05日
    浏览(48)
  • ubuntu 没有网络,网络中或者右上角没有有线设置或以太网

    问题现象描述: 打开设置-网络模块,仅有VPN和网络代理,没有有线设置或以太网,网络正常的应该如下图所示 1、查看interfaces文件,该文件内容是否正常 查看内容是否如下图所示,如下图所示则正常,关闭即可; 2、修改NetworkManager.conf配置文件,将managed=false更改为managed=

    2024年01月22日
    浏览(54)
  • 解决新版Edge浏览器右上角不显示Copilot图标的问题

    本文主要介绍一种通过修改配置文件来解决新版Edge浏览器右上角不显示Copilot图标的方法,该方法适用于Edge的正式版和Dev版。 经测试,此方法适用于windows、macOS和linux系统下的Edge浏览器。 另外,文章最后还补充了一种通过下载旧版Edge浏览器解决这个问题的方法,以备将来第

    2024年02月04日
    浏览(53)
  • (最新解决方案)关于Edge浏览器右上角的Copilot按钮不见了

    问题背景:今天突然发现Edge浏览器右上角的Copilot按钮不见了,排查了一下,发现可能是浏览器自动升级到120版本后,关闭了右上角的Copilot按钮。现在教大家如何通过别的方式访问Copilot。 在微软的官网中,发现可以通过直接访问网址的方式来使用Copilot。 https://copilot.microso

    2024年02月05日
    浏览(95)
  • uni-app/微信小程序 分享功能(开启右上角分享)@令狐张豪

    end~~~ 如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读! 文章对您有所帮助请给作者点个赞支持下,谢谢~

    2024年02月15日
    浏览(44)
  • [VUE学习]权限管理系统前端vue实现8-右上角用户头像显示实现

               next(‘/logon’) 、 next(to) 或者 next({ …to, replace: true })           在路由守卫中, 只有next()是放行 ,其他的诸如:next(‘/logon’) 、 next(to) 或者 next({ …to, replace: true })都不是放行, 而是:中断当前导航,执行新的导航                 他不是直接放行 二十

    2024年02月13日
    浏览(43)
  • 微信小程序分享只能通过微信自带的右上角三个点分享吗

    在微信小程序中,用户可以通过**右上角的三个点(更多按钮)**来进行分享,这是微信小程序提供的默认分享入口。用户点击右上角的三个点后,会弹出分享菜单,包含了分享到微信好友、朋友圈等选项。 一、自定义分享内容给朋友或群 除了使用右上角的三个点进行分享,

    2024年02月06日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包