< html>< meta name = "baidu page"&gt>
背景:#c11136;< ul> li</lt;解決策)
これはすでに効果があります
学び、ポイントを受け取ります。 。 。
いや、よく見ると、それぞれの
の下の境界線の長さが異なります。
あなたが指摘した問題は本当に見つかりませんでした
いいえ、よく見ると、それぞれの の下の境界線の長さが異なります
あなたが指摘した問題は本当に見つかりませんでした。
このコードの結果は次のとおりです: そして、結果が次のようになりたい: それらのいくつかの ブラウザの問題、border-bottom-width の値をより大きい値に設定してください値を大きくすると、効果がより明白になります
ブラウザの問題です。border-bottom-width の値をより大きな値に設定すると、効果がより明白になります
それを設定しましたが、私が望むのは効果ではありません。
;/title>
body{
background-color:#ffdee0;
# ナビゲーション {
width:200px;
font-family:Arial
}
#navigation ul {
list-style-type:none;
#navigation li {
border-bottom:1px; Solid #ED9F9F; /* 下線を追加 */
}
#navigation li a{
Padding:5px 5px 0.5em;
border-left:12px; /* 左側に太い赤いエッジ */
border-right:1px Solid #711515; /* 右側に影 */
}
#navigation li a :link, #navigation li a:visited{
background-color: #C11136; #ffffff; ;/a</lt;</li>この効果
各要素のボックス モデルを考えて、それを検索できます。実際には 4 辺の境界線が交差しているため、各境界線は長方形ではなく台形になります。これが、最初のスタイルを考えた理由です。ボーダーボトムを増やす上記の例を見ると、それがよくわかります。この機能を使用して純粋な CSS 三角形を作成する例がインターネット上にあります。
2 番目のスタイルは、外側のレイヤー li の border-bottom を設定することで、ボーダー上の内側のレイヤー a のパディングの影響を回避することです。
さらに、ul の背景と li のマージンを設定して、境界線効果を実現することもできます。クリックしてオンラインデモンストレーションを表示します
しかし、以前に送信されたセットがなぜこの効果を達成できなかったのかわかりません