0

カスタムボタンにホバーグローを実装しようとしています（下の写真を参照）。Chrome でプレイしていますが、-webkit-radial-gradient で同様の外観を実現できません。 ここに画像の説明を入力

<html>
  <head>
    <style type="text/css">
      button {
        margin-top: 20px;
        width: 100px;
        height: 32px;
        border-style: solid;
        border-width: 1px;
        border-radius: 5px 5px 5px 5px;
        border-color:#D95D00;
        box-shadow: 0 0 4px #F3BB35 inset;
        background: -webkit-gradient(linear, left bottom, left top, from(#D95D00), to(#E6A200));
        background: -webkit-gradient(linear, left top, left bottom, from(#FFD266), to(#F28430));
        background: -webkit-gradient(linear, left bottom left top, from(#E97F2F), to(#F3BB35));
      }
      button:hover {
        background: -webkit-gradient(linear, left bottom, left top, from(#D95D00), to(#E6A200));
        background: -webkit-gradient(linear, left top, left bottom, from(#FFD266), to(#F28430));
        background-image: -webkit-radial-gradient(center, ellipse cover, #FFFFFF, #000);
      }
    </style>
  </head>
  <body>
    <button>Hello</button>
  </body>
</html>
4

1 に答える 1

0

線形グラデーションで非常にうまく機能します。放射状のグラデーションは似ています：dabblet。

background-image（グラデーション）のサイズを（任意の単位で）指定する必要があります。次に、これらのプロパティの1つ以上を変更します。

background-size: // to change the glow radius
background-position: // to change the center of the glow, pretty much analogue to linear gradient
background-color: // for partly transparent gradients
于 2012-08-09T11:25:08.523 に答える