2

私はjqueryスライドショーを使用していますが、これは非常にうまく機能します。唯一の問題は、Chrome の CSS ラウンド ボーダー スタイルを具体的に使用しているにもかかわらず、Google Chrome の画像「div」に丸いボーダーが表示されないことです。ほとんどすべてのブラウザが独自のコードを使用して丸い境界線を持っていることを知っているので、すべてのブラウザで利用可能な設定を設定しました。それでも、Chrome では正常に動作しません。

この小さなページを HTML と CSS で埋める代わりに、スライドショーのURLを提供したいと思います。必要に応じてソース コードを読むこともできます。CSS リンクはheadタグ内にあります。

4

5 に答える 5

2

あなたの例には丸い角があり、トランジション中にそれらを見ることができます。ただし、含まれ<a>ている'は画像よりも幅が広いです... <a>'を画像と同じサイズにするか、より適切で単純なものにborder-radiusして、<img>'をに適用します。

また、FirefoxとChromeは、ベンダープレフィックス-moz-border-radiusとのサポートを削除しました-webkit-border-radius。を使用するだけborder-radiusです。

于 2012-12-19T21:39:43.153 に答える
2

の代わりに CSSを画像に割り当てます.slides_container

これをCSSに追加します

  img
    {
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;
       border-radius: 10px; 
    }
于 2012-12-19T21:40:05.510 に答える
2

このコードをCSSに追加します

div.slides_control a img {border-radius: 12px;}
于 2012-12-19T21:38:29.580 に答える
0

これはうまくいくはずです：

#slides_control img {
   border-radius: 3px;
}

ブラウザのプレフィックスは必要ありません: http://caniuse.com/#feat=border-radius

于 2012-12-19T21:40:55.887 に答える
0

私を助けようとしてくれてありがとう。

div のスタイルを設定したいだけの場合、border コマンドが正常に機能するため、オーバーフローが非表示になるのを防ぐ Google Chrome のバグがあるようです。

解決策は、これをスタイルに追加することです:

#slider{
    border-radius: 10px;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

うまくいけば、私のような他の貧乏人が、一日を救うことができる小さなコードを探して一晩中過ごすことはありません.

于 2012-12-20T20:30:20.427 に答える