在线笔记 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);

}

1735

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

一个使用CSS/HTML将图像自适应屏幕的示例
在这个示例中，我们将图像的最大宽度设置为100%，并将高度设置为自动。此外，我们还添加了一个样式，以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能...
网页图片CSS进阶篇——优化图片，提升网页加载速度
说到提升网页中图片加载速度，一般立即想到的是给图片瘦身，比如减小图片尺寸，或者通过工具降低图片文件大小，比如png图片，可以利用在线压缩PNG图片网页工具，一般...
使用certbot申请泛域名证书以及手动续期
泛域名的证书申请或手动续期需要在dns解析服务器设置相应的txt记录。申请或续期使用同样的certbot命令，如下，记录以备用。
php/javascript的一些关于时间处理的函数
记录一些经常用到的时间处理函数以备用。
现在还有哪些好用的网络收藏夹？
看到几年前有人问过这个问题，上网搜索一下，大概能找到以下几家，目前貌似都还能访问： 1、当然有这里—— favii人性化网络收藏夹，不过最近favii升级新版...
自用小工具：正则表达式测试是否能匹配字符串
正则表达式写起来不难，但是要做到准确无误却是一个不小的挑战，经常因为一个小疏忽，导致貌似正常而实际上却有bug。尤其是域名或url相关的，特别容易出错，出错...