效果图：
HTML：
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="index.css" />
<title>Cool box</title>
</head>
<body>
<p>This is a cool box</p>
</body>
</html>
CSS：
html {
font-family: sans-serif;
}
/* Your CSS below here */
p {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
/* 样式中没有设置字体大小，默认字体是16px，1.1rem=（16*1.1）px=17.6px */
font-size: 1.1rem;
color: white;
text-shadow: 2px 2px 2px black;
border-radius: 20px;
border: 1px solid rgb(255, 217, 0);
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0.5)
),
yellow;
box-shadow: 5px 5px 5px black, inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
7959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
