CSS 3之设置图片边框

最新推荐文章于 2024-06-24 11:02:57 发布

菇毒

最新推荐文章于 2024-06-24 11:02:57 发布

阅读量7.8k

点赞数 4

分类专栏： web 前端学习 # CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43960383/article/details/125337814

版权

web 前端学习同时被 2 个专栏收录

90 篇文章 4 订阅

订阅专栏

CSS

34 篇文章 1 订阅

订阅专栏

设置图片边框

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>

20220505

菇毒

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
CSS 3之设置图片边框

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

扫一扫

专栏目录