0

見栄えを良くするために、周囲に境界線を作成しようとしている画像があります。画像をスライスして、右上、上、左上、右、左、右下、左下、下の画像を作成しました。

境界線は角を除いてすべて大丈夫です、どんな体もここで私を助けることができますか？私はいくつかのCSSが欠けていると思います。画像は細かくスライスされているように見えますが、Imは提案を受け入れています。

よろしくお願いします

これは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;
}
4

1 に答える 1

1

右端と左端のセル (td 要素) の width プロパティを設定してみてください。角を丸くする作業を行っていない限り、HTML のベストプラクティスではない補助画像を使用して境界線を付けようとしていると思います。しかし、角を丸くしたくない場合。IMG 要素を使用して、境界線 (パディング付きのイベント) を指定するだけで見栄えがよくなります (HTML コードが少なくなり、見栄えが良くなります)。

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

javascript を使用せずに、画像のマウスオーバー イベントの境界線の色をイベント シフトできます (要素内に img 要素を配置した場合にのみ機能します)。

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

スタイル：

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

a:hover img
{
    border-color: #069;
}
于 2009-09-11T14:14:44.477 に答える