CSS 3之设置图片边框

通过中的让图片是否具有边框；示例如下：通过 HTML 标记设置图片边框，其边框显示都是黑色，且风格单一，唯一能够设定的就是边框的粗细，不能对边框的样式进行设置；使用属性定义边框样式，即边框风格（点线式-dotted、破折式边框-dashed、直线式边框-solid、双线式边框-double等）；例子 1：若需要单独定义边框一边的样式，可使用设定上边框样式、设定右边框样式、设定下边框样式、设

菇毒

8031人浏览 · 2022-06-17 18:04:58

菇毒 · 2022-06-17 18:04:58 发布

设置图片边框

1. 设置图片边框
2. 单独设置一边边框

1. 设置图片边框

通过 img 中的 border 让图片是否具有边框；
示例如下：

<img src="3.jpg"

通过 HTML 标记设置图片边框，其边框显示都是黑色，且风格单一，唯一能够设定的就是边框的粗细，不能对边框的样式进行设置；
使用 border-style 属性定义边框样式，即边框风格（点线式-dotted、破折式边框-dashed、直线式边框-solid、双线式边框-double等）；

例子 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片大小</title>
	</head>
	<body>
		<img src="3.jpg" style="border-style: dotted;width: 480px;height: 380px;" border=5  alt="">
		<img src="3.jpg" style="border-style:dashed;width: 480px;height: 380px;" border=6 alt="">
		<img src="3.jpg" style="border-style: solid;width: 480px;height: 380px;" border=7 alt="">
		<img src="3.jpg" style="border-style: double;width: 480px;height: 380px;" border=8 alt="">
	</body>
</html>

20220505

2. 单独设置一边边框

若需要单独定义边框一边的样式，可使用 border-top-style设定上边框样式、 border-tright-style设定右边框样式、 border-bottom-style设定下边框样式、 border-left-style设定左边框样式；

例子 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片边框(二)</title>
	</head>
	<body>
		<img src="6.gif" border="3" style="border-style: dotted;border-right: insert;border-bottom-style: dashed;border-left-style: groove;"/>
	</body>
</html>