参考资料

1. HTML DOM 返回一个链接的type属性的值实例
2. HTML DOM 返回一个客户端图像映射的usemap的值
3. HTML DOM 返回的主机名：图像映射的某个区域的端口 实例
4. HTML DOM document.write() 方法
5. HTML DOM 返回一个button所属表的ID 实例
6. HTML DOM 返回image的longdesc属性的值
7. HTML DOM 返回一个button的type 实例
8. HTML DOM为表格指定规则

HTML DOM 给 image 加上 border

详细介绍

HTML DOM 可以通过多种方式为 <img> 元素添加边框，包括 HTML 属性、JavaScript DOM 操作和 CSS 样式。

标签

<img> 标签

用法

1. 使用 HTML border 属性

<img src="image.jpg" border="1">

2. 使用 JavaScript DOM 操作

document.getElementById("myImage").style.border = "1px solid black";

3. 使用 CSS

img {
    border: 1px solid #000;
}

实例

HTML 属性实例

<img src="photo.jpg" border="2" alt="示例图片">

JavaScript 实例

<img id="myImg" src="photo.jpg" alt="示例图片">
<script>
    document.getElementById("myImg").style.border = "3px dashed red";
</script>

CSS 实例

<style>
    .bordered-img {
        border: 4px double blue;
        padding: 5px;
    }
</style>
<img class="bordered-img" src="photo.jpg" alt="示例图片">

功能

• 为图片添加视觉边框

• 突出显示图片内容

• 创建图片框架效果

• 增强页面设计感

CSS 扩展

可以通过 CSS 扩展更多边框样式：

img.fancy-border {
    border: 5px ridge #ccc;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    padding: 8px;
    background: #f8f8f8;
}

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。