0

これは私が変更しようとしているスライダーです: http://webkunst.comeze.com/

そして、これは私が達成したいボーダーのオーバーフローです: ここに画像の説明を入力

問題は、コンテナのoverflow:hiddenで画像を機能させるためにあらゆることを試みたことですが、それは不可能です。すべてのコンテナのdivなどの相対位置で試しました。

誰かが私を助けることができますか？透明な境界線は必須ではありませんが、最も重要なことは、オーバーフローを境界線で隠蔽することです。

これはマークアップです：

<div id="home_slider">
    <ul id="slides">
        <li class="home_slide"><img src="images/slide1.jpg" alt=""></li>
        <li class="home_slide"><img src="images/slide2.jpg" alt=""></li>
        <li class="home_slide"><img src="images/slide3.jpg" alt=""></li>
        <li class="home_slide"><img src="images/slide4.jpg" alt=""></li>
    </ul>
</div>

およびCSS:

    #home_slider {
      margin: 0 auto;
      width: 880px;
      height: 416px;
      position: relative;
      z-index: 5;
      overflow: hidden;
    }
    #home_slider ul#slides {
      list-style: none;
      position: relative;
      overflow: hidden;
      border-radius: 20px;
    }
    #home_slider ul#slides li {
      margin: 0;
      width: 900px;
      height: 416px;
    }
    .home_box {
      margin-top: 30px;
      float: right;
    }
    .home_box .home_image {
      float: left;
      border: 3px solid #6f6f6f;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      overflow: hidden;
      margin-left: 13px;
    }

このチュートリアルからスライダーを取得しました: http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle

4

1 に答える 1

1

の代わりに を div にborder-radius適用するだけです。透明な境界線の場合、rgba を使用できます。これも適用する必要があります。#home_slider#home_slider ul#slides#home_slider

#home_slider {
    margin: 0 auto;
    width: 880px;
    height: 416px;
    position: relative;
    z-index: 5;
    overflow: hidden;
    border-radius: 20px; /* add this */
    border: 15px solid rgba(255, 255, 255, 0.5); /* add something like this for the transparent border */
}

編集:border-radius要素がそうでない場合、Chromeはコンテンツをaにクリップできないようposition:staticです。ただし、透明な境界線なしで生活できる場合は、これを上記の同じルールに追加して角を丸くすることができますが、境界線を削除する必要があります。

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
于 2012-11-17T00:01:19.387 に答える