css渐变背景条纹且不占全部高度

1. 效果

2. 实现

 .title {
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #263a5c;
  line-height: 21px;
  transform-style: preserve-3d;
}
.title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, #4589ff 100%);
  transform: translateZ(-1px);
}

posted @ 2023-08-10 11:38 Li_pk 阅读(36) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· css 利用 linear-gradient 实现条纹背景

· 使用background-clip解决半透明边框被背景色渗透问题

· css渐变背景，linear-gradient()线性渐变和radial-gradient()径向渐变

· css渐变

· css实现渐变背景的方式

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

昵称： Li_pk
园龄： 5年4个月
粉丝： 7
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

笔记

css渐变背景条纹且不占全部高度

1. 效果

2. 实现

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	.title {
	font-size: 15px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: bold;
	color: #263a5c;
	line-height: 21px;
	transform-style: preserve-3d;
	}
	.title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, #4589ff 100%);
	transform: translateZ(-1px);
	}