bootstrap pagination CSS使边框更粗但不是内边框

Question

如何制作引导分页CSS使边框更粗但不是内部边框？像这个图像吼叫？

我试过但我用过的css全部都有，有人可以帮我这个吗？感谢。

HTML：

<ul class="pagination pull-right">
    <li><a href="#">First</a></li>
    <li class="disabled"><a href="#">Previous</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">116</a></li>
    <li><a href="#">Next</a></li>
    <li><a href="#">Last</a></li>
  </ul>

的CSS：

.pagination>li>a, .pagination>li>span {
   border: 4px solid #ddd;
}

js fiddle：https://jsfiddle.net/8hnhmxh8/

Answer 1

.pagination {
  border: 4px solid #ddd;
}
.pagination > li > a {
   border: 1px solid #ddd;
   border-radius: 0px!important;
}

JSFIDDLE

Answer 2

问题是边框位于a-tag上，而不是li-tag。但试试这个：

.pagination>li>a, .pagination>li>span {
   border-top: 4px solid #ddd;
   border-bottom: 4px solid #ddd;
}

.pagination>li:first-of-type > a {
  border-left: 4px solid #ddd;
}

.pagination>li:last-of-type > a {
  border-right: 4px solid #ddd;
}

https://jsfiddle.net/8hnhmxh8/1/

Answer 3

而不是在li元素上应用边框，而只在ul元素上执行。

.pagination {
   border: 4px solid #ddd;
}

Answer 4

您可以将边框更新为。

.ul { border:1px solid black; padding:10px; }

我已经分叉了你的代码。

https://jsfiddle.net/4p7413jz/1/

希望它有效!!!