13

<div>要素がborder/border-radiusを正しくレンダリングし<a>ます<button>が、background、border、border-radiusが設定されているものは、背景色または画像を正方形として表示し、境界線のみが円形になります。<a>＆<button>todisplay: blockまたはを設定しようとしましdisplay: inline-blockたが、うまくいきませんでした。

既知の回避策はありますか？

Webkitから計算されたスタイルへのリンクは次のとおりです：https ：//gist.github.com/773719

代替テキスト

IE9開発ツールから計算されたスタイルは次のとおりです。 代替テキスト

フィルタを使用して更新 ：; または-ms-filter:; IEにグラデーションを設定するプロパティを使用すると、背景が定義された境界半径から外れます。

4

5 に答える 5

3

解決策は、ボーダー半径とオーバーフローを持つ別の要素内にグラデーションをネストすることです。これは理想的とは言えませんが、すべて CSS です。ハックなし。

これ以外では、背景画像を使用すると非常にうまく機能します。

<div class="corner">
   <div class="grad">button</div>
</div>


<style>
.corner,
.grad{
   height:50px;
   width:250px;
   }
.corner{
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   overflow:hidden;
   }
.grad{
   border:1px #659300 solid;
   background: #659300; /* old browsers */
   background: -moz-linear-gradient(top, #659300 0%, #6F9B00 50%, #528200 51%, #6CA501 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#659300), color-stop(50%,#6F9B00), color-stop(51%,#528200), color-stop(100%,#6CA501)); /* webkit */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1cc00', endColorstr='#518e00',GradientType=0 ); /* ie */
   }
</style>
于 2011-06-06T16:11:39.437 に答える
3

SVG グラデーション スプライトを使用してこの特定の問題を修正する方法を示すこの優れたブログ投稿を見つけました。 /

于 2011-02-21T17:06:24.647 に答える
1

これにも突っ込みます。「フィルター」ベースのグラデーションは、実際には背景画像ではありません。CSS3 グラデーションでは余分なレイヤーであるためです。IE チームは明らかに、これらのフィルター レイヤーを丸みを帯びた角にクリッピングすることに慣れていません。人々がこのようなボタンを作ろうとしているのは明らかなので、奇妙です.

従来の機能と新しい機能をマッピングするのは苦痛に違いありません。CSS でグラデーションを実装した方がよい場合もあります。従来のフィルターを追加するよりも、プレフィックスを追加したいです。

于 2011-02-11T11:35:42.037 に答える
0

Ultimate CSSGradientGeneratorを使用しています。IE9でフィルターを無効にするには、次のコードを使用することをお勧めします。

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

これで問題が解決するはずです。

于 2012-08-28T08:19:34.727 に答える