default
menu home
图标库 注册 登录 favorite_border message help_outline
在线笔记 - 人性化网络收藏夹

CSS3 一款漂亮的带渐变背景和关闭按钮的卡片头样式

style分类标签: 全部 CSS html javascript php/other IT
by: fanshome  2023-05-20 13:50(UTC)

演 示

使用css: linear-gradient来实现线性颜色渐变背景,效果见下图:

note_11_0.png

点击“演示”按钮可以查看效果。

CSScontent_copy复制代码
.box{
	width:300px;
	height:360px;
	margin:60px auto;
}
.boxHeader{
	background: linear-gradient(44.24deg,#098 0%,rgba(0,170,153,.6) 100%);
    width: 100%;
	height: 80px;
	padding: 8px 16px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	color: #fff;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
	position:relative;
}
.cancel{
	width:32px;height:32px;
	font-size:20px;
	line-height:32px;
	cursor:pointer;
	text-align:center;
	color:#fff;
	position:absolute;
	top:8px;right:8px;
}
.cancel:hover{
	color:#eee;
	background:#0ba;
	border-radius:50%;
}
.content{
	width: 100%;
	height: 100%;
	background:#eee;
	box-sizing: border-box;
	border: 1px solid #bbb;
}
htmlcontent_copy复制代码
<div class='box'>
	<div class='boxHeader'>
		<div class='cancel' onclick='closeBox()'>&#10006</div>
		<h3>这里的背景是渐变色</h3>
	</div>
	<div class='content'>
	</div>
</div>
javascriptcontent_copy复制代码
$=mdui.$;
function closeBox() {
	$('.box').hide();
	setTimeout(() => {
		$('.box').show();
	}, 600);

}

visibility 1184


- 重度网络用户必备 在线笔记
adimg
logo 发表评论

captcha
请正确填写验证码
取 消