css怎么给图片加上下边框?

在CSS中,通过给img标签分别设置border-top和border-bottom属性来给图片加上下边框。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

border-top是一个简写属性,可以在一个声明设置所有的上边框属性。如果不设置其中的某个值,也不会出问题,比如 border-top:solid #ff0000; 也是允许的。

border-top属性可能值:

  • border-top-width 规定上边框的宽度。

  • border-top-style 规定上边框的样式。

  • border-top-color 规定上边框的颜色。

border-bottom是一个简写属性,可以在一个声明设置所有的下边框属性。如果不设置其中的某个值,也不会出问题,比如 border-bottom:solid #ff0000; 也是允许的。

border-bottom属性可能值:

  • border-bottom-width 指定底部边框宽度

  • border-bottom-style 指定底部边框样式

  • border-bottom-color 指定底部边框颜色

示例:给图片添加上下边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img {
				border-top: 5px solid red;
				border-bottom: 5px solid red;
			}
		</style>
	</head>

	<body>
		<p>设置图片上下边框</p>
		<img src="1.jpg" alt="Paris" width="400" height="300">
	</body>
</html>

效果图:

1.png

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是css怎么给图片加上下边框?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏