自適應寬度圓角導航如何實現

時間 2019-12-05

標籤自適應寬度圓角導航如何實現欄目 CSS 简体版

原文原文鏈接

讓子元素的背景圖片右對齊，這樣就能夠覆蓋父元素的背景，而padding-left是爲了讓父元素露出按鈕左側部分不致於被子元素的背景覆蓋。

優勢：自適應寬度變化；各瀏覽器顯示效果一致；

缺點：

因爲使用子元素的背景圖覆蓋父元素的，因此不能使用背景透明的圖片來實現，不然按鈕右側圓角部分會使得父元素的背景圖片露出，大街網使用的是白色背景，所以該按鈕若是在非白色背景的場景使用會有白邊：
若是有多個不一樣高度的按鈕，就要製做多張圖片，或者使用圖片拼接拼成一張，不便維護和拓展；
引進無語義化的html標籤；

<!DOCTYPE html>

<head>

<title>Document</title>

*{margin: 0; padding: 0}

.bg{height: 50px;}

.leftBg{

height: 45px;

line-height: 45px;

color: #fff;

background: url(left.png) no-repeat left top;

padding-left: 34px;

float: left;