CSS-设置图像效果

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>

运行结果:
在这里插入图片描述
2、设置图片大小及缩放


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片大小及缩放</title>
</head>
<body>
<div style="border: 1px red solid;">
	<h1>图片大小</h1>
	<img  src="../java.jpg" style="width: 160px;height: 180px;"/>
</div>
<div style="border: 1px red solid;">
	<h1>图片缩放</h1>
	<img src="../java.jpg" style="width: 20%;"/>
</div>
</body>
</html>

运行结果:
在这里插入图片描述
3、图文混排


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图文混排</title>
<style type="text/css">
	img{
		width: 150px;
		height: 180px;
		float: left;
		margin: 5px;
	}
</style>
</head>
<body>
<img src="../java.jpg">
<p>Java之父——詹姆斯·高斯林出生于加拿大,是一位计算机编程天才。在卡内基·梅隆大学攻读计算机博士学位时,他编写了多处理器版本的Unix操作系统。</p>
<p>1991年,在Sun公司工作期间,高斯林和一群技术人员创建了一个名为Oak的项目,旨在开发运行于虚拟机的编程语言,同时允许程序在电视机机顶盒等多平台上运行。后来,这项工作就演变为Java。随着互联网的普及,尤其是网景开发的网页浏览器的面世,Java成为全球最流行的开发语言。因此被人称作Java之父。</p>
<p>高斯林一直对oracle公司抱有不满。这位工程师在离开甲骨文时写到,“我所说的都关乎细节与诚实,但吐露真相只会带来更多的坏处。”并称,“在Sun与oracle的并购会议上,到处是有关Sun和谷歌专利的争吵。oracle律师的眼睛闪闪发光。”
他表示,在收购Sun的早期阶段,oracle就表示出要同谷歌展开法律交锋的意愿。他本人也曾批评Android市场上的碎片化现象太过严重,足以影响软件开发者的工作。</p>
</body>
</html>

运行结果:
在这里插入图片描述
4、设置图片与文字的对齐方式


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片与文字的对齐方式</title>
<style type="text/css">
	p{
		border: 1px red solid;
	}
</style>
</head>
<body>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: baseline;"/> 方式:<img src="../blue.jpg" style="vertical-align: baseline;"/>baseline</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: top;"/> 方式:<img src="../blue.jpg" style="vertical-align: top;"/>top</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: middle;"/> 方式:<img src="../blue.jpg" style="vertical-align: middle;"/>middle</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: bottom;"/> 方式:<img src="../blue.jpg" style="vertical-align: bottom;"/>bottom</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: text-bottom;"/> 方式:<img src="../blue.jpg" style="vertical-align: text-bottom;"/>text-bottom</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: text-top;"/> 方式:<img src="../blue.jpg" style="vertical-align: text-top;"/>text-top</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: sub;"/> 方式:<img src="../blue.jpg" style="vertical-align: sub;"/>sub</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: super;"/> 方式:<img src="../blue.jpg" style="vertical-align: super;"/>super</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: 20px;"/> 方式:<img src="../blue.jpg" style="vertical-align: 20px;"/>20px;</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: -20px;"/> 方式:<img src="../blue.jpg" style="vertical-align: -20px;"/>-20px;</p>
</body>
</html>

运行结果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值