图像内的 JQuery 边框

Question

我有一个像这样的图像 slider :

<div class="bx-wrapper" style="width:516px; position:relative;">
    <div class="bx-window" style="position:relative; overflow:hidden; width:516px;">
        <ul style="width: 999999px; position: relative; left: -516px;">
            <li style="width: 129px; float: left; list-style: none outside none; height:68px; margin-top:3px">
                <a href="javascript:void(0)" id="p_5">
                    <img src="question_pliki/5.png" alt="">
                </a>
            </li>
            <!--... many more <li> elements-->
        </ul>
    </div>
</div>

我想要做的是在事件图像上制作边框，我有这个 JQuery 脚本:

$('.bx-window ul li').click(function(){
    $(this).parent().find('li').css('border','none');
    $(this).css('border','5px solid #f28458');
});

它制作了一个边框但在图像之外，并且破坏了我的布局。

是否可以在图像内部制作边框？

Answer 1

您可以将元素上的 box-sizing 更改为 border-box。这将使边界位于内部。

.bx-window ul li {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}