在线笔记 favinavi - 人性化网络收藏夹

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

分类标签：全部 CSS html javascript php/other IT

by: fanshome 2023-05-20 13:50(UTC)

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

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

CSS复制代码

.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;
}

html复制代码

<div class='box'>
	<div class='boxHeader'>
		<div class='cancel' onclick='closeBox()'>&#10006</div>
		<h3>这里的背景是渐变色</h3>
	</div>
	<div class='content'>
	</div>
</div>

javascript复制代码

$=mdui.$;
function closeBox() {
	$('.box').hide();
	setTimeout(() => {
		$('.box').show();
	}, 600);

}

1738

favinavi - 重度网络用户必备在线笔记

CSS实现在普通可滚动容器元素内的类似position:fixed悬浮固定按钮效果
有时候，我们需要在某个可滚动（scroll）的元素内实现悬浮固定按钮效果，按钮不能随着鼠标滚动而变化。在全可视窗口实现这个效果（比如顶部的悬浮菜单）比较简单，只...
What should the best web favorites look like?
What should the best web favorites look like? Let's clarify the premise of ...
家用服务器proxmox 7.3开启samba共享目录
大家知道，proxmox本身是debian系统，所以直接在debian系统安装samba服务即可开启共享，windows和linux、android、macOS...
favinavi为什么会选择微软的bing搜索作为默认的搜索引擎？
这个选择初看有点奇怪，因为论搜索，谷歌是当然的第一选择，而中文搜索，百度又是当仁不让的中文搜索老大，微软的bing虽然做得还不错，但无论从哪方面说，它似乎都不该...
favinavi人性化网络收藏夹与pinbox跨平台收藏工具的简单对比
简体中文世界里的网络收藏夹类网站，我个人观点：pinbox是做得非常用心的一个，看得出来背后有一个专业团队在开发和运营，人数多少不知道，但肯定是比favinav...
CSS学习笔记：flex布局做出元素两端对齐效果
很久以前，还没有flex布局方法的时候，想要在同一行内的两个元素分两端左右对齐，应该使用float方法，左边的元素使用float:left; 右边的元素使用fl...