css立体圆角弹出层确认框效果代码

代码语言:html

所属分类:弹出层

代码描述:css立体圆角弹出层确认框效果代码

代码标签: css 立体 圆角 弹出层 确认框

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <style>
        .clay {
	background:var(--clay-background,rgba(0,0,0,.005));
	border-radius:var(--clay-border-radius,32px);
	box-shadow:var(--clay-shadow-outset,8px 8px 16px 0 rgba(0,0,0,.25)),inset var(--clay-shadow-inset-primary,-8px -8px 16px 0 rgba(0,0,0,.25)),inset var(--clay-shadow-inset-secondary,8px 8px 16px 0 hsla(0,0%,100%,.2))
}
body,html {
	height:100%;
	display:grid;
	background:white;
	background:linear-gradient(216deg,rgba(255,255,255,0.8169642857) 0,#6667ab 100%);
	font-family:"Fredoka",sans-serif
}
#container {
	margin:auto;
	padding:1em 5em;
	color:#f1f1f1;
	--clay-background:#eee;
	--clay-border-radius:48px;
	--clay-shadow-outset:12px 12px 24px 0 rgba(102,103,171,.75);
	--clay-shadow-inset-primary:-12px -12px 24px 0 rgba(102,103,171,0.65);
	--clay-shadow-inset-secondary:12px 12px 24px 0 rgba(102,103,171,0.2)
}
p {
	margin:1em 0 .75em;
	text-align:center;
	font-weight:bo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0