<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<style type="text/css">
#controlGroup{
list-style: none;
}
#controlGroup li{
float: left;
display: inline-block;
width: 30px;
height:30px;
border:3px solid #000;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<ul id="controlGroup">
<li><<</li>
<li>></li>
<li>□</li>
<li>>></li>
</ul>
<script type="text/javascript">
$(function(){
// 第一个li的左上和左下设定为圆角
// （四个边的方向顺序：上右下左）
// （四角：四边的坐标向左偏移45度，顺序：左上 右上 右下 左下）
$('#controlGroup>li:first').css('border-radius','6px 0 0 6px');
// 最后一个的li右上和右下设定为圆角
$('#controlGroup>li:last').css('border-radius','0 6px 6px 0');
// 调整重合边框的宽度（把除最后一个li的右边框去掉，即宽度为0）
// $('#controlGroup>li:not(:last-child)').css('border-right','0');
// $('#controlGroup>li:not(:last)').css('border-right','0');
$('#controlGroup>li:lt(3)').css('border-right','0');
});
</script>
</body>
</html>
结果展示：
网友评论