如何仅用CSS3实现四面带有实感box-shadow的按钮样式？

你当前的代码有几处小问题，加上边框层次感没做对，调整后就能贴近目标样式：

核心问题说明 #

目标按钮的边框是带立体质感的「双层高光+阴影」结构，你之前的单一边框和错误的渐变写法导致效果偏差。

修正后的完整CSS代码 #

.button {
    /* 修正渐变拼写错误，调整颜色更贴近目标按钮的浅灰渐变 */
    background: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
    background-color: #f5f5f5;
    border-radius: 6px;
    /* 模拟立体边框：基础边框+内外阴影营造层次感 */
    border: 1px solid #d1d1d1;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.8), /* 内阴影做顶部高光，还原按钮内边框的亮感 */
        0 1px 1px rgba(0,0,0,0.1); /* 外阴影做底部暗边，增强立体悬浮感 */
    display: inline-block;
    cursor: pointer;
    color: #cc0000; /* 微调红色更贴近目标按钮的深红 */
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffff;
}

/* 可选：加hover效果，更贴近原生按钮体验 */
.button:hover {
    background: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
}

关键调整细节 #

• 把你写错的qlineargradient改成标准的linear-gradient，同时调整渐变颜色，更匹配目标按钮的浅灰质感
• 边框部分：用基础border打底，再通过内阴影模拟按钮内部的高亮边框，外阴影补充底部的暗调阴影，完美还原目标按钮的立体边框层次
• 微调文字红色，让它更接近目标按钮的色调

内容的提问来源于stack exchange，提问作者joe