0

タグがあるこの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>

私がやりたいのは、スパンテキストにカーソルを合わせると、ベベルアップして、ボタンのような効果を与えることです。現在、下向きに面取り中です。

どうしたら曲がるようになりますか？ここにそれのフィドルがあります。

4

1 に答える 1

0

値を簡単に調整する必要がありました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;
}
<span id="slider-next" style="float:left"></span>

JSFiddle バージョン: http://jsfiddle.net/g7YMV/4/

于 2015-10-03T04:37:34.287 に答える