css实现新拟态弹出对话框确认框ui效果代码-html代码-BFW代码库

css实现新拟态弹出对话框确认框ui效果代码

代码语言：html

代码描述：css实现新拟态弹出对话框确认框ui效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Fredoka:wght@400;700&amp;display=swap'>

    <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 0.75em;
	text-align:center;
	font-w.........完整代码请登录后点击上方下载按钮下载查看