0

どちらかというとバックエンド プログラマーですが、デザインを実装していて、ボーダー ボックスを実装する最も効率的な方法を知りたかっただけです。

これがボックスの例です -

ボーダーボックス

青いタブには、セクションのヘッダー テキストが含まれます。

理想的には、HTML と CSS だけを使用したいのですが、タブの形状が原因で、タブを画像として使用する必要があるかもしれません。これらのボックスは、内容に応じてさまざまなサイズになる可能性があります。

私は青い枠線を問題なく使用できました

 -webkit-border-radius: 10px; -moz-border-radius: 10px;

または同様に、私にとって問題を引き起こすのは主にタブです。誰かがアドバイスを提供できる同様のことをしましたか?

4

2 に答える 2

1 
.tab-header {
  background: blue;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-bottom: 10px; /* we extend the header by 10px to the bottom */
}

.tab-body {
  border: 1px solid blue;
  background: white; /* set a solid background */
  margin-top: -10px; /* move the body 10px up, so it covers the
                        10px padding from above */
}

それに応じて、border-radius のプレフィックスを付ける必要がありますが、それを除けば、これは最近のブラウザーで機能するはずです。

于 2012-09-28T09:27:39.270 に答える
1

ここから始めて、必要に応じて変更してください。目的に合わせて機能するはずです。

于 2012-09-28T09:34:15.073 に答える