default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

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

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-05-20 13:50(UTC)

Demo

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

note_11_0.png

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

CSScontent_copyCopy codes
.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_copyCopy codes
<div class='box'>
	<div class='boxHeader'>
		<div class='cancel' onclick='closeBox()'>&#10006</div>
		<h3>这里的背景是渐变色</h3>
	</div>
	<div class='content'>
	</div>
</div>
javascriptcontent_copyCopy codes
$=mdui.$;
function closeBox() {
	$('.box').hide();
	setTimeout(() => {
		$('.box').show();
	}, 600);

}

visibility 1058


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel