使用盒子阴影制作斜角效果答案

【问题标题】：Using box shadow to make bevel effect使用盒子阴影制作斜角效果
【发布时间】：2013-06-07 01:21:52
【问题描述】：

我有这个 css 代码，上面有一个标签。当我将鼠标悬停在它上面时，我将它设置为斜面。

这是css：

#slider-next {    
    padding:10px 60px;
    -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
border-radius: 25px;
    background: -moz-linear-gradient(top, #28c4e3 0%, #0d5664 100%); /* firefox */

    text-shadow: 0 1px 2px #fff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28c4e3), color-stop(100%,#0d5664)); /* webkit */font-size:20px}

#slider-next:hover {
    box-shadow:         0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
    -moz-box-shadow:    0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
    -webkit-box-shadow: 0 1px 2px #fff, 0 -1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
     border: solid #ccc 3px;
}

这是html：

<span id="slider-next" style="float:right"></span>

我想要做的是，当我将鼠标悬停在跨度文本上时，它会向上倾斜，以提供类似按钮的效果。现在它正在向下倾斜。

如何让它弯曲？ Here's a fiddle of it.

【问题讨论】：

你可以使用这个在线免费工具来生成你需要的东西:) css3generator.com
那行不通@julien

标签： html css bevelled

【解决方案1】：

只需要快速调整box-shadow 值（我反转了y 值），现在它看起来更像一个按钮。此外，您的前缀 box-shadow 声明应始终位于未加前缀的声明之前。

现场演示：

#slider-next {    
    padding:10px 60px;
    -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
border-radius: 25px;
    background: -moz-linear-gradient(top, #28c4e3 0%, #0d5664 100%); /* firefox */

    text-shadow: 0 1px 2px #fff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28c4e3), color-stop(100%,#0d5664)); /* webkit */font-size:20px}

#slider-next:hover {
    -moz-box-shadow:    0 -1px 2px #fff, 0 1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.8);
    -webkit-box-shadow: 0 -1px 2px #fff, 0 1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.8);
    box-shadow:         0 -1px 2px #fff, 0 1px 1px #666, inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.8);
    border: solid #ccc 3px;
}

&lt;span id="slider-next" style="float:left"&gt;&lt;/span&gt;

JSFiddle 版本：http://jsfiddle.net/g7YMV/4/

【讨论】：