CSS设置图片边框

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/nangeali/article/details/52457045

CSS设置图片边框


          HTML设置图片的边框

          HTML中通过<img>标记的border属性值,给图片添加边框,从而控制边框的粗细,当该值为0时,表示没有边框。

<span style="font-size:24px;"><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" border="0">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" border="1">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" border="2">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" border="3"></span>

          代码如上,可以看到所有边框都是黑色,而且风格非常单一,都是实线,仅仅是边框的粗细可以进行调整。

          CSS设置图片的边框

          CSS通过border属性,为图片设置各式各样的边框效果,border-style定义边框的样式,如虚线、实线或点划线等等,并且,在Dreamweaver中通过语法提示,可以轻松地获得各种边框样式的值。

          可以通过border-color定义边框的颜色,border-width定义边框的粗细。

<span style="font-size:24px;"><html>
	<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" 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>
</html></span>

          代码如上,第一个图片的效果为金黄色、5像素宽的点划线,第二个图片为蓝色、2像素宽的虚线。

          在CSS中可以分别设置4个边框的不同样式,分别设定为border-left、border-right、border-top、border-bottom的样式。

<span style="font-size:24px;"><html>
	<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>
</html></span>

          代码如上,为图片的四个边框分别设置了不同的风格样式,这种方法在很多其他HTML元素中也经常使用。

          Border属性,还可以将各个值写到同一语句中,用空格分隔,这样可以大大的减少代码的长度。

<span style="font-size:24px;"><html>
	<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>
</html></span>

          这样,可以加快网页的下载速度,而且更加清晰易读。

          此外,除了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>


阅读更多
换一批

没有更多推荐了,返回首页