1

css 3の問題について助けが必要です...

問題は、boder-radius で scrollBox を定義してから一番下までスクロールすると、境界線にクリッピングの問題が発生することです。コンテンツ div が静的な位置で定義されていれば問題ありませんが、翻訳効果のために相対位置にする必要があります。

次のコードを試して、私が何を意味するかを確認できます。

<html>

<body>
    <div class="scrollBox" style="width:50%;height:100px;background:grey;border-radius:10px">
        <div class="content" style="height:100%;overflow:scroll">
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
            <div>Item</div>
        </div>

    </div>
</body>

</html>

私の問題の解決策が実際にあることを願っています。ありがとう ！

4

2 に答える 2

2

水平方向のパディングを少し追加します: .content { padding:0 10px;}

背景色の角を丸くするだけだと思いますborder-radiusが、実際には形状を変更したり、ブロックの角を切り取ったりしません。

于 2012-10-27T17:11:31.270 に答える
0

境界線の半径は、背景色だけでなく、実際にはコンテンツをクリップします。必要なのはoverflow: hidden;コンテナブロックだけ.scrollBox

于 2012-10-27T18:11:49.877 に答える