我正在尝试制作类似于图片中显示的按钮的东西。
我尝试了以下方法:
.button {
box-shadow:inset 0px 1px 0px 0px #ffffff;
background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color:#ededed;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:red;
font-family:Arial;
font-size:12px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
上面的 CSS3 代码给了我以下内容:
我不确定如何制作具有与图片相似的边框的相同按钮。
最佳答案
首先，框阴影的 4 个部分是 x 偏移、y 偏移和模糊以及展开我对您的代码做了一些调整并得到了这个输出。
.button {
box-shadow: inset 0px 0px 5px 2px #000;
background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color: #ededed;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: red;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>`substitute(Filename('', 'Page Title'), '^.', '\u&', '')`</title>
</head>
<body>
<div class="button">
quit
</div>
</body>
</html>关于html - 如何仅使用 CSS3 获得四面八方的实体框阴影？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73161139/