1

角が丸いCSS長方形があります。その上にタブのような構造を追加したいと思います。

これが私が話していることです。 http://i.imgur.com/J2h0Ncm.png

2つの異なる要素を作成し、配置を合わせて追加しようとしましたが、実際には見えません（主に影のため）l。単一要素の CSS で作成できますか?

前もって感謝します！

編集（詳細）：

次のように、境界線が丸い長方形があります。

#mybox
{
width: 800px;
height:400px;
border:thin;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;   
border-color:black;
box-shadow: 3px 3px 10px 5px #000;  
}

このように上部を微調整/ストレッチしたい.

4

3 に答える 3

2

このコードを試してください...

<div style="width: 93px; height: 72px;">
  <div style="width: 93px; height: 13px; background-image: url('tabtop.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: left top"></div>
  <div style="width: 93px; height: 59px; background-image: url('tabbottom.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: left top"></div>
</div>

以下の画像で... divのサイズを画像に合わせる場合は問題なく、背景プロパティとして使用すると、実際のdivにテキストを含めることができます

ここに画像の説明を入力

ここに画像の説明を入力

于 2013-03-20T04:03:46.530 に答える
1

：beforeセレクターを使用して、要求しているものを作成できます。

これは、それを使用する方法についてのアイデアを与えるための簡単な実装です：

<div class="foo"></div>

.foo {
    width: 200px;
    height: 100px;
    border: 4px solid #000;
    margin-top: 24px;
    position: relative;
    -webkit-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.foo:before {
    display: block;
    height: 20px;
    width: 30px;
    border: 4px solid #000;
    border-bottom-width: 0;
    content: " ";
    position: absolute;
    left: 0;
    top: -24px;
    background: #fff;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
于 2013-03-20T04:10:21.257 に答える
1

タブ機能を備えたブートストラップやjquery uiなどのパッケージ化されたものを使用しないのはなぜですか? 独自のものを構築したい場合は理解できますが、近道が必要ですか?

ブートストラップ: http://twitter.github.com/bootstrap/

jquery ui: http://jqueryui.com/

UI開発を支援するために利用可能なそのようなパッケージは多数ありますが、これらは2つの一般的なものです

于 2013-03-20T03:57:48.947 に答える