0

jqueryを使用して、最初のLIの左上と左下の角を丸くし、最後のliの右上と右下を丸くするにはどうすればよいですか？

border-radiusを使用できることは理解していますが、クロスブラウザソリューションにはなりません。

これが私が始めたものです：http：//jsfiddle.net/c7NyZ/1/

jsfiddleにリソースを追加して更新できるのであれば、それは素晴らしいことです。

HTML：

<div id="new-menu-upper">
<ul id="top-nav">
<li><a href="/t-topnavlink.aspx">menu item 1</a></li>
<li><a href="/t-topnavlink.aspx">menu item 2</a></li>
<li><a href="/t-topnavlink.aspx">menu item 3</a></li>
<li><a href="/t-topnavlink.aspx">menu item 4</a></li>
<li><a href="/t-topnavlink.aspx">menu item 5</a></li>
<li><a href="/t-topnavlink.aspx">menu item 6</a></li>
</ul>
</div>

CSS：

div#new-menu-upper {
    border: 0 solid red;
    height: 40px;
    margin: 0 5px 10px;
    padding-top: 63px;
}
ul#top-nav li {
    background-image: url("http://i47.tinypic.com/21nqxjc.png");
    background-repeat: repeat;
    border-right: 2px solid lightgrey;
    float: left;
    height: 41px;
    width: 156px;
}
ul#top-nav li a {
    color: White;
    display: inline-block;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    padding-left: 38px;
    padding-top: 12px;
    text-transform: uppercase;
}

編集：クロスブラウザソリューションである必要があります。つまり、MIN IE7で動作する必要があり ます*編集：JQUERY.CORNERSリソースをJSFIDDLEに追加し、コーナーで最初のLIレンダーを作成しようとしましたが、動作しません-助けてください* -http ：//jsfiddle.net/c7NyZ/4/

解決策：http：//jsfiddle.net/c7NyZ/6/（JSライブラリを適用しませんでした！）

編集：最初のLiは2番目のliとマージしているようですが、これを修正できますか？-http ://jsfiddle.net/c7NyZ/7/

4

5 に答える 5

2

シンプルで、使用するだけfirst-childで、last-child疑似要素

  ul#top-nav li:first-child{
    border-radius : 10px 0px 0px 10px;
  }
  ul#top-nav li:last-child{
    border-radius : 0px 10px 10px 0px;
  }

JSBIN

css3 pieを使用する場合は、

 ul#top-nav li{behavior: url(PIE.htc);}  
 ul#top-nav li:first-child{
        border-radius : 10px 0px 0px 10px;
 }
 ul#top-nav li:last-child{
      border-radius : 0px 10px 10px 0px;
 }

それ以外の場合、IE 6,7,8に曲線を組み込む場合は、適切に配置された画像またはベクターグラフィックライブラリを使用する必要があります。

チェックアウトcss3pie-そのきちんとした！

于 2012-05-23T12:30:03.580 に答える
1

これは私のバージョンです：

ul#top-nav li:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
ul#top-nav li:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

jsFiddle

編集：最新のFirefox、Opera、Chromeで動作します。Linuxを使用していますが、IEについてはわかりません

于 2012-05-23T12:32:08.597 に答える
1

border-radiusプロパティは、IE9 +、Firefox 4以降、Chrome、Safari 5以降、およびOperaでサポートされています。cssコードは次のとおりです。

  .first_li{
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   -moz-border-radius : 10px 0px 0px 10px; /*firefox 3.6 and earlier*/
  }
  .last_li{
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   -moz-border-radius : 0px 10px 10px 0px;/*firefox 3.6 and earlier*/
   }

そして、これが対応するjqueryコードです：

$(function(){ // use any other event handler like click, hover or others
     $('ul#top_nav li:first').addClass('.first_li');
     $('ul#top_nav li:last').addClass('.last_li');
 });
于 2012-05-23T12:40:01.060 に答える
1

これをすべてのブラウザに使用します。

ul li:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
ul li:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
于 2012-05-23T12:50:23.257 に答える
1

（そうではない）古き良き時代には、人々はそれを困難な方法で行いました。これは難しい方法でした：

  • ボックスを4divで囲みます
  • 各divに正しいクラスを追加します（左上、右上、左下、右下）
  • 各クラスに丸みを帯びた画像を追加します
  • ???
  • 利益！

jsfiddleでは、コードは次のようになります。http: //jsfiddle.net/Ralt/c7NyZ/5/

実際の例を次に示します：http ：//www.sitepoint.com/examples/jscorners/four-nested-divs.html

ここに実際のチュートリアルが表示されます：http ：//webcsstips.wordpress.com/2009/07/17/boxes-with-rounded-corners/丸みを帯びた角の画像ジェネレーターのように、いくつかの素晴らしいリンクがあります。

そうは言っても、最近はCSS3PIEを選びます。

于 2012-05-23T12:52:23.287 に答える