0

私はこのコードを持っていますhttp://jsfiddle.net/Kbzgd/私がやろうとしているのは、右上隅にあり、丸みを帯びた効果もあります...

しかし、border-bottom を削除して、border-top のようなコンテンツにその境界線を追加すると、アクティブなタブはその境界線を下部に取得し、=\

このようにしたいのですが、右上の角を丸くすることはできますか？

ありがとう

4

2 に答える 2

2

試着border-top-right-radius: 5px_.tab_content_container

もう少しいじった後、これを追加しました：

border-top-right-radius: 6px;
border-top: 1px solid #CCC;
position: relative;
top: -1px;
z-index: -10;

そのため、右隅が少しきれいに見えます。別の方法として、値と値box-shadow: 0 -1px 0 0 #CCCの代わりに (div の上の影)を使用することもできます。border-toptop

編集：さらに編集した後、少し突き出た部分を取り除きました（上記のいくつかの例を注意深く見ればわかります）。

z-indexあなたがしなければならないのは、ulの境界線を削除することです（ulの後ろに設定する限り、divからの境界線/影は正常に機能します）. 境界線を移動すると、境界線が少しずれるのでposition: relative; top: 1px;、ul に戻る可能性があることに注意してください。

コードの残りの部分と競合するものがあるかどうかわからないため、複数のオプションを指定しました。

最終的な CSS は次のとおりです。

ul.tabs {
    border-bottom: 1px solid rgba(0, 0, 0, 0); /*this is an alternative which sets the border to be transparent*/
    float: left; 
    height: 29px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 100%;
}

.tab_content_container {
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid #ccc; border-top: none;
    clear: both; 
    float: left; 
    width: 100%; 
    border-top-right-radius: 6px;
    /*border-top: 1px solid #CCC;
    /*top: -1px; again some alternatives*/
    position: relative;
    z-index: -10;
    box-shadow: 0 -1px 0 0 #CCC
}
于 2012-05-20T23:40:35.877 に答える
1

ここ: http://jsfiddle.net/2CVNj/ タブの周りに新しい div を追加して、overflow: autoソリューションを使用してフロートをクリアし、コンテンツの上に境界線を移動し、いくつかの z-index をいじりました。うまく動作します。

于 2012-05-20T23:53:29.837 に答える