css实现不定长卡券

最新推荐文章于 2022-12-31 00:03:59 发布

苏苏哇哈哈

最新推荐文章于 2022-12-31 00:03:59 发布

阅读量136

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_48085286/article/details/121225612

版权

css 专栏收录该内容

63 篇文章 8 订阅

订阅专栏

1.实现效果

在这里插入图片描述

2.实现代码

2.1重点代码：不设置宽度用padding撑开父元素

min-width: 67px;
display: inline-block;
padding: 0 10px;

2.2完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background: #222;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}

		.content {
			min-width: 67px;
			display: inline-block;
			font-size: 12px;
			line-height: 23px;
			color: #FFFFFF;
			padding: 0 10px 0 10px;
			height: 23px;
			-webkit-mask: radial-gradient(circle at 5px, transparent 5px, red 0) -5px;
			background: linear-gradient(145deg, red, orange);
			border-radius: 4px;
			position: relative;
			margin-bottom: 40px;
		}

		.content::before {
			content: '';
			position: absolute;
			border: 1px dashed #fff;
			height: 23px;
			top: 0;
			left: 10px;
			transform: scaleX(0.5);
		}

		.content p {
			padding-left: 10px;
		}
		.col{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
	</style>
	<body>
		<section class="col">
			<div class="content">
				<p>苏苏1232342324334</p>
			</div>
			<div class="content">
				<p>苏苏</p>
			</div>
			<div class="content">
				<p>苏苏好好好好哈哈哈哈哈哈哈</p>
			</div>
			<div class="content">
				<p>dagedadagedadasdgdada </p>
			</div>
			<div class="content">
				<p>大大大大所大所大所大所大所大所大所大所大所大所大所大所大所大所</p>
			</div>
		</section>
	</body>
</html>

苏苏哇哈哈

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css实现不定长卡券

1.实现效果2.实现代码2.1重点代码：不设置宽度用padding撑开父元素min-width: 67px;display: inline-block;padding: 0 10px;2.2完整代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> * {
复制链接

扫一扫

专栏目录