【css】关于css样式中border-radius和border-image不兼容问题

最新推荐文章于 2024-09-24 16:51:16 发布

原创最新推荐文章于 2024-09-24 16:51:16 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

当前文章被以下社区和专栏收录：

文章描述了一个使用CSS实现的注销(logout)按钮的设计，包括尺寸、颜色、渐变效果和圆角等样式细节。

在这里插入图片描述

<div class="out">
		<div class="in">
			Log Out
		</div>
</div>

<style type="text/css">
		.out{
			margin: 0 auto 10rpx;
			width: 336rpx;
			height: 64rpx;
			box-sizing: border-box;
			border-image: linear-gradient(270deg, rgba(15, 149, 136, 1), rgba(0, 120, 178, 1)) 2 2;
			font-size: 28rpx;
			font-family: Helvetica;
			color: #0078B2;
			line-height: 64rpx;
			text-align: center;
			border-radius: 44rpx;
		}
		.in{
			width: 100%;
			height: 100%;
			border-radius: 44rpx;
			text-align: center;
			border: 2rpx solid;
		}
	</style>