1

角が丸いdiv（ボタンである必要があります）を作成しようとしています。border-radius.htcまたはPIE.htcを使用してこれを機能させることができます。

マージントップを使用して配置します。下の他のdivに流れるボタンの部分は表示されませんが、表示されているはずです。スクリーンショットを確認してください：

ここに画像の説明を入力してください

.menu_buttons{
       margin-top:45px;
       overflow: visible;
       margin-left: 10px;
       width: 85px;
       height: 3em;
       vertical-align: middle; 
       float:left;
       cursor: pointer;
       text-align: center;
       font: 0.9em Arial, Helvetica, sans-serif;

       border-radius: 10px;
       behavior: url(PIE.htc);

}

。対角線：

.diagonal{

    background-image: linear-gradient(left top, #CFD993 30%, #8DA900 68%);
    background-image: linear-gradient(-45deg, #CFD993 30%, #8DA900 68%);
    background-image: -o-linear-gradient(left top, #CFD993 30%, #8DA900 68%);
    background-image: -moz-linear-gradient(-45deg left top, #CFD993 30%, #8DA900 68%);
    background-image: -webkit-linear-gradient(135deg, #CFD993 30%, #8DA900 68%);
    background-image: -ms-linear-gradient(left top, #CFD993 30%, #8DA900 68%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CFD993', endColorstr='#8DA900', GradientType=1); 
    /*background: #CFD993;*/


    background-image: -webkit-gradient(
            linear,
            left top,
            right bottom,
            color-stop(0.3, #CFD993),
            color-stop(0.68, #8DA900)
    );

}

私のhtmlの一部：

<div class="diagonal" id="section1">
        <img alt="SMIC Service Management In the Cloud" src="/images/smic_small.png" id="smic">        
        <div class="link_menu">
            <button class="menu_buttons ui-corner-all smic_green" id="overview">Overview</button>
            <!--Some more <div....-->
            <button class="menu_buttons ui-corner-all smic_green" id="usage_benchmark">SMICloud<br>usage<br>benchmark</button>            
            <a class="menu_items" id="get_smic">Get SMICloud</a>
            <!--Some more <a....-->
            <a class="menu_items" id="contact">Contact</a>
         </div>  

    </div>

.diagonalに以下を追加すると、以下のスクリーンショットに従って外観が変更されます。

position: relative;
z-index: -1;

ここに画像の説明を入力してください

＃section1の下のdivにz-index -10を追加しようとしても、何も起こりません。

私は完全に立ち往生しています。これを行うにはどうすればよいですか？別のdivにオーバーフローする丸い角を持つdivを作成しますか？

4

1 に答える 1

2

奇妙な動作を防ぎ、デバッグ時間を節約するために、定義を分離する必要があります。

提供した要素の残りがなくてもCSS、次の定義を使用して、言及されたすべてのブラウザーで完全にテストされた動作例を確認できますdiv.menu_buttons。

この作業例を参照してください!

CSS

.curved {
  -moz-border-radius:10px;        /* Firefox */
  -webkit-border-radius:10px;     /* Safari and chrome */
  -khtml-border-radius:10px;      /* Linux browsers */
  border-radius:10px;             /* CSS3 */
  behavior:url(border-radius.htc) /* Internet Explorer */
}

.menu_buttons {
  position:relative;
  top: 20px;
  margin-left: 10px;
  width: 85px;
  height: 60px;
  float:left;
  vertical-align: middle;    
  cursor: pointer;
  text-align: center;
  font: 0.9em Arial, Helvetica, sans-serif;
}

例の HTML

<div class="menu_buttons curved">.menu_buttons element</div>

border-radius.htcをダウンロードして、 CSS の曲がった角のデモと Pageを確認してください。

テスト済み

Windows XP Professional バージョン 2002 Service Pack 3

  • Internet Explorer 8.0.6001.18702
  • オペラ 11.62
  • Firefox 3.6.16
  • サファリ5.1.2
  • Google Chrome 18.0.1025.168m
  • Kメレオン1.5.4

Windows 7 ホーム エディション サービス パック 1

  • Internet Explorer 9.0.8112.164211C
  • オペラ 11.62
  • Firefox 12.0
  • サファリ5.1.4
  • Google Chrome 18.0.1025.168m

Linux Ubuntu 12.04

  • Firefox 12.0
  • Chromium 18.0.1025.151 (開発者ビルド 130497 Linux)

編集済み

の必須アプライアンスに関する OP のコメントに関連しCSS positionます。

setなしpositionで角を丸くした div の作業例!

編集済み

いくつかのチャットの後の最終的な修正はposition、要素ラッパーと要素自体の CSS の適切な宣言でした。

正しい宣言を持つフィドルの例!CSS

于 2012-05-26T15:38:58.757 に答える