如何通过CSS的border属性为图片设置边框效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了如何通过CSS的border属性为图片设置边框效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3248字，纯文字阅读大概需要5分钟。
内容图文
如何为通过css为图片设置一个边框呢，HTML中是通过<img>标记的border属性值，给图片添加边框的，css中是通过border属性，为图片设置各式各样的边框样式，border-style定义边框的样式，如虚线、实线或点划线等等。HTML设置图片的边框
HTML中通过<img>标记的border属性值，给图片添加边框，从而控制边框的粗细，当该值为0时，表示没有边框。
<span style="font-size:24px;"> <img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"> <img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="1"> <img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="2"> </span>
代码如上，可以看到所有边框都是黑色，而且风格非常单一，都是实线，仅仅是边框的粗细可以进行调整。
CSS设置图片的边框
在Dreamweaver中通过语法提示，可以轻松地获得各种边框样式的值。
可以通过border-color定义边框的颜色，border-width定义边框的粗细。
<html>
<span style="font-size:24px;">
<head>
<title>
边框
</title>
<style>
<!--
img.test1{
border-style:dotted;
border-color:#FF9900;
border-width:5px;
}
img.test2{
border-style:dashed;
border-color:blue;
border-width:2px;
}
-->
</style>
</head>
<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="test1">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="test2">
</body>
</span>
</html>代码如上，第一个图片的效果为金黄色、5像素宽的点划线，第二个图片为蓝色、2像素宽的虚线。
在CSS中可以分别设置4个边框的不同样式，分别设定为border-left、border-right、border-top、border-bottom的样式。
<html>
<span style="font-size:24px;">
<head>
<title>
分别设置4个边框
</title>
<style>
<!--
img{
border-left-style:dotted;
border-left-color:#FF9900;
border-left-width:5px;
border-right-style:dashed;
border-right-clolr:#33CC33;
border-right-width:2px;
border-top-style:solid;
border-top-color:#CC00FF;
border-top-width:10xp;
border-bottom-style:groove;
border-bottom-color:#666666;
border-bottom-width:15px;
}
-->
</style>
</head>
<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"">
</body>
</span>
</html>代码如上，为图片的四个边框分别设置了不同的风格样式，这种方法在很多其他HTML元素中也经常使用。
Border属性，还可以将各个值写到同一语句中，用空格分隔，这样可以大大的减少代码的长度。
<html>
<span style="font-size:24px;">
<head>
<title>
合并各CSS值
</title>
<style>
<!--
img.test1{
border:5px double #FF00FF;
}
img.test2{
border-right:5px double #FF00FF;
border-left:8px solid #0033FF;
}
-->
</style>
</head>
<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test1">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test2">
</body>
</span>
</html>这样，可以加快网页的下载速度，而且更加清晰易读。
此外，除了border属性可以将各个属性值写到一起，CSS的很多其他属性也可以进行类似的操作，例如，font，margin及padding等属性都可以统一。
<span style="font-size:24px;">
p{
font:italic bold 30px Arial,Helvetica,sans-serif;
padding:0px 5px 0px 3px;
}
</span>相关推荐：
实现css虚线样式的两种方式：dotted和dashed（实例）
以上就是如何通过CSS的border属性为图片设置边框效果的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的如何通过CSS的border属性为图片设置边框效果全部内容，希望文章能够帮你解决如何通过CSS的border属性为图片设置边框效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。