CSS-设置图像效果

最新推荐文章于 2021-08-05 14:47:12 发布

娃娃救葫芦爷

最新推荐文章于 2021-08-05 14:47:12 发布

阅读量587

点赞数

分类专栏： CSS基础

本文链接：https://blog.csdn.net/cc098818/article/details/99345663

版权

这篇博客介绍了如何使用CSS来设置图像效果，包括为图片添加边框，调整图片的大小和缩放比例，实现图文混排，以及设置图片与文字的对齐方式。通过这些技巧，可以更好地在网页中展示和布局图像。

摘要由CSDN通过智能技术生成

1、设置图片边框


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片边框</title>
<style type="text/css">
	.i1{
		border-width: 1px;
		border-color: red;
		border-style: solid;
	}
	
	.i2{
		border: 2px red dashed;
	}
	
	.i3{
		border: 2px red dotted;
	}
	
	.i4{
		border-top: 6px red solid;
		border-right:2px blue dashed;
		border-bottom: 2px yellow dotted;
		border-left: 2px blue dashed;
	}
</style>
</head>
<body>
<h1>实线边框</h1>
<img src="../java2.jpg" class="i1"/>
<h1>虚线边框</h1>
<img src="../java2.jpg" class="i2"/>
<h1>点画线边框</h1>
<img src="../java2.jpg" class="i3"/>
<h1>给不同的边框设置样式</h1>
<img src="../java2.jpg" class="i4"/>
</body>
</html>

运行结果：

最低0.47元/天解锁文章

娃娃救葫芦爷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS-设置图像效果

1、设置图片边框<!DOCTYPE html><html><head><meta charset="UTF-8"><title>设置图片边框</title><style type="text/css"> .i1{ border-width: 1px; border-color: red; ...
复制链接

扫一扫

专栏目录