Rumah >hujung hadapan web >tutorial css >如何通过CSS的border属性为图片设置边框效果
如何为通过css为图片设置一个边框呢,HTML中是通过a1f02c36ba31691bcfe87b2722de723b标记的border属性值,给图片添加边框的,css中是通过border属性,为图片设置各式各样的边框样式,border-style定义边框的样式,如虚线、实线或点划线等等。
HTML设置图片的边框
HTML中通过a1f02c36ba31691bcfe87b2722de723b标记的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(实例)
Atas ialah kandungan terperinci 如何通过CSS的border属性为图片设置边框效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!