自适应宽度圆角导航如何实现

时间 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;

position: absolute;

}

.rightBg{

height: 45px;

padding-right: 45px;

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

}

</style>

</head>

<body>

</div>

</body>

</html>