博客
关于我
强烈建议你试试无所不能的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/

你可能感兴趣的文章
数据仓库入门(实验6)添加层次结构
查看>>
第一次获得Microsoft MVP应该做的事
查看>>
用OSSIM发现网络扫描
查看>>
IT群侠传第四回大鱼小虾
查看>>
10分钟搭建Kubernetes容器集群平台(kubeadm)
查看>>
我的家庭私有云计划-18
查看>>
当我们谈论知识管理时,我们在谈论什么?
查看>>
我是这样看搜狗搜索与知乎合作的
查看>>
演示:为思科29系列的交换机升级IOS镜像
查看>>
统一沟通-技巧-4-让国内域名提供商“提供”SRV记录
查看>>
一次DPM备份Exchange DAG的故障处理过程
查看>>
Windows Server 2012 NIC Teaming配置实战
查看>>
KingbaseES的HA搭建
查看>>
思科加强生成树性能的属性(Portfast /Uplinkfast/BackboneFast)与RSTP的关系
查看>>
lvm的使用总结
查看>>
【马哥教育视频】Linux平台软件包管理系列视频
查看>>
DPM2012系列之五:开启最终用户恢复功能
查看>>
使用JFinal/Jsmart框架开发体验(一)
查看>>
zabbix企业应用之discovery监控交换机流量
查看>>
webservice是什么?
查看>>