图像边框未正确对齐答案

【问题标题】：Image Border not aligning properly图像边框未正确对齐
【发布时间】：2010-11-27 12:28:31
【问题描述】：

我有一张图片，我试图在它周围创建一个边框，让它看起来更好看。我已经对图像进行了切片，以获得右上、上、左上、右、左、右下、左下和底部的图像。

边框一切都很好，除了角落，任何人都可以帮助我吗？我想我错过了一些 CSS。图像似乎被分割得很好 - 但我愿意接受建议。

感谢和亲切的问候

这是 HTML

<table cellspacing="0" cellpadding="0"  border="0">
                    <tr>
                        <td >
                             <img alt="Corner" src="graphics/bgTopLeft.PNG" width="15px" height="13px" /></td>
                        <td class="AdminBoxTitleMainTop" >
                            </td>
                         <td>
                           <img  alt="Corner" src="graphics/bgTopRight.PNG"  /> </td>
                    </tr>
                    <tr>
                        <td class="AdminBoxTitleMainLeft">
                           </td>
                        <td> <img id="afMgrPhoto" alt="Affiliate Manager" src='#' runat="server" />
                        </td>
                        <td class="AdminBoxTitleMainRight">
                           </td>
                    </tr>
                    <tr>
                        <td>
                           <img alt="Corner" src="graphics/bgBottomLeft.PNG" /> </td>
                         <td class="AdminBoxTitleMainBottom">
                            </td>
                       <td >
                           <img alt="Corner" src="graphics/bgBottomRight.PNG" /> </td>
                    </tr>
                </table>

这是CSS

.AdminBoxTitleMainTop {
    background-image: url(../graphics/bgTop.PNG);
    background-repeat: repeat-x;
    height: 17px;
}

.AdminBoxTitleMainBottom {
    background-image: url(../graphics/bgBottom.PNG);
    background-repeat: repeat-x;
    height: 17px;
}

.AdminBoxTitleMainRight {
    background-image: url(../graphics/bgRight.PNG);
    background-repeat: repeat-y;
    height: 17px;
}

.AdminBoxTitleMainLeft {
    background-image: url(../graphics/bgLeft.PNG);
    background-repeat: repeat-y;
    height: 17px;
}

【问题讨论】：

标签： html css image border

【解决方案1】：

您可以尝试为最右边和最左边的单元格（td 元素）设置宽度属性。我猜你正在尝试使用补充图像来设置边框，这不是 HTML 中的最佳实践，除非你正在做一些圆角的东西。但是如果你不想要圆角。您可以只使用一个 IMG 元素并提供一个边框（带有一些填充的事件）以使其看起来不错（以及更少的 HTML 代码，这样更好。）

<img style="padding: 5px; border: solid 1px #dedede" src="img.png" alt="" />

您可以在不使用任何 javascript 的情况下为图像的 mouseover 事件移动边框颜色（仅当您将 img 元素放置在元素内时才有效）。

<a href='#'><img src="img.png" alt="" /></a>

风格：

a img
{
    border: solid 1px #dedede;
    padding: 5px; 
}

a:hover img
{
    border-color: #069;
}

【讨论】：