博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML <img> 标签的 border 属性
阅读量:5973 次
发布时间:2019-06-19

本文共 1167 字,大约阅读时间需要 3 分钟。

定义和用法

<img> 标签的 border 属性规定图像周围的边框的宽度,就是说可以增加或去掉图像的边框。

注释:默认地,图像是没有边框的(除非图像在 a 元素内部)。

浏览器通常会把代表超链接的图像(例如包含在 <a> 标签中的图像)显示在两个像素宽的边框里面,以表示读者可以通过选择这个图像来访问相关联的文档。

使用 border 属性和一个用像素表示的宽度值就可以去掉 (border="0") 或加宽图像的边框。

注意:该属性在 HTML 4 和 XHTML 中也不再被推荐使用了,同样是应该被样式所代替,但却依然被流行浏览器很好地支持着。

实例

下面的 HTML 可以产生不同粗细的图像边框:

浏览器支持

尽管不推荐使用 border 属性,但是所有主流浏览器均支持该属性。

提示和注释

注释:HTML 4.01 不推荐使用图像的 "border" 属性。在 XHTML 1.0 Strict DTD 和 HTML 5 中,不再支持该属性。

提示:请使用  来改变元素的边框样式。您可以在一个外部样式表中使用 CSS 边框属性,为站点上的所有图像设置一致的边框。与单独为一个图像设置 border 属性相比,这种方式无疑拥有更高的效率。

兼容性注释

不推荐使用 img 元素的 border 属性;在 HTML 4.01 Strict 以及 XHTML 1.0 Strict DTD 中,不支持 img 元素的 border 属性。

请使用 CSS 代替。

CSS 语法:<img style="border:5px solid black">

在我们的 CSS 教程中,您可以找到更多有关  的细节。

语法

属性值

描述
pixels 边框的宽度,以像素为单位。

TIY 实例

本例演示如何使用 <img> 标签的 border 属性来改变图像的边框。

延伸阅读:去掉图像的边框

通过在 <img> 标签中使用 border="0" 属性,就可以把图像超链接周围的边框去掉。对于某些图像,尤其是那些图像映射来说,没有边框可能会使页面的外观得到改善。而对于那些清楚地表示是指向其他图像的链接按钮,如果没有边框,图像看上去可能会更好。

虽然去掉边框不会降低文档的可用性,但还是要多加小心。因为没有边框就意味着去掉了一种非常常见的超链接视觉指示效果,这使得读者可能不会像原来那么很容易就可以找到这些链接。浏览器通常会在鼠标移动到超链接图像上的时候改变鼠标指针的形状,但是不能指望浏览器一定会这样做,更不应该让用户在没有边框的图像上摸索,已找到那些隐藏的链接。

我们强烈推荐你在使用无边框图像时,最好同时使用其他方法,以便你的读者知道应该在这些图像上单击。即使使用简单的文字,也很难使文档对于读者来说具有更好的可访问性。

出自:

转载地址:http://qefox.baihongyu.com/

你可能感兴趣的文章
openssh for windows
查看>>
PostgreSQL cheatSheet
查看>>
ASP.NET Core 2 学习笔记(三)中间件
查看>>
转:Mosquitto用户认证配置
查看>>
SpringBoot上传文件到本服务器 目录与jar包同级
查看>>
python开发_difflib字符串比较
查看>>
被解放的姜戈01 初试天涯
查看>>
三极管工作区在Spectre中的表示
查看>>
HT for Web的HTML5树组件延迟加载技术实现
查看>>
ASP.NET MVC 3 Razor Nested foreach with if statements
查看>>
【Mysql】命令行
查看>>
Asterisk 安装与配置
查看>>
SQL2008-中不想插入从复记录
查看>>
.Net基础
查看>>
AES加密算法原理
查看>>
《Programming WPF》翻译 第8章 4.关键帧动画
查看>>
iOS UI基础-16.0 UIButton
查看>>
屏蔽各大视频网站播放前15秒30秒广告
查看>>
进入TP-Link路由器之后利用快捷键F12查看星号路由密码的方法
查看>>
linux内核的oops
查看>>