実装の難しさは、first-child と last-child の 2 つのセレクターと、その後の margin-left:-1px の適用と 33% と 34% の幅の技術的な処理にあります。 もう 1 つの困難は、box-shadow:1px 0 0 #F1F1F1 inset; の実装です。 最後に: コードをコピーしますコードは次のとおりです: 背景:- webkit-gradient(linear, 左上, 左下, from(#f9f9f9), to(#b6b4b4));background:-moz-linear-gradient(top, #f9f9f9, #b6b4b4);background:-o -linear-gradient(top, #f9f9f9, #b6b4b4);background:linear-gradient(top, #f9f9f9, #b6b4b4); コードをコピーしますコードは次のとおりです: http://www.w3.org/1999/xhtml ;" xml :lang="ja"> html5,css3 メニュー <br> .jikey_demo{ width:80%; margin:0 auto; }<br> .news_info{margin-bottom:5px;border:1px Solid #bbb;border-radius:5px;box-shadow:0 1px 0 #f1f1f1;}<br> .news_info a{display:inline-block; width: 33%;height:26px;font-family:"Microsoft Yahei";line-height:26px;text-align:center;color:#555;border-right:1px Solid #ccc;box-shadow:1px 0 0 #F1F1F1 inset;}<br> .news_info a:first-child{width:33%;box-shadow:none;border-radius:4px 0 0 4px;}<br> .news_info a:last-child{width : 34%;border-right:none;margin-left:-2px;border-radius:0 4px 4px 0;}<br> .news_info a:hover, .news_info a.current{color:#208edd;background:- webkit -gradient(linear, 左上, 左下, from(#f9f9f9), to(#b6b4b4));background:-moz-linear-gradient(top, #f9f9f9, #b6b4b4);background:-o-linear- gradient (top, #f9f9f9, #b6b4b4);background:linear-gradient(top, #f9f9f9, #b6b4b4);}<br> News1< a class="" href="/guide/">ニュース 2ニュース 3