[已收纳]CSS之网页图片美化

15195775117 · 发表于 2019-11-12 09:46:16

登录后查看更多精彩内容~

您需要登录才可以下载或查看，没有帐号？立即注册

x

本帖最后由 15195775117 于 2021-2-13 19:02 编辑

图片大小

<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">
<style type="text/css">
.w200{width:300px}
</style>
<img class="w200" src="http://bbs.06climate.com/data/attachment/album/201911/06/103331k16e7q5x1f6ekhhq.jpg" />
</html>
如果只设置长宽其一，图片会保持长宽比，如果都设置则不会

15195775117 · 发表于 2019-11-12 10:00:18

立体凸槽边框

<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">
<style type="text/css">
.frame{border:ridge 100px gray}
ima{width:200px;}
</style>
<img class="frame" src="http://bbs.06climate.com/data/attachment/album/201911/06/103331k16e7q5x1f6ekhhq.jpg" />
</html>
立体凸槽.jpg

15195775117 · 发表于 2019-11-12 10:03:30

本帖最后由 15195775117 于 2019-11-12 10:07 编辑

普通边框

<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">
<style type="text/css">
.frame{border:solid 100px green}
ima{width:200px;}
</style>
<img class="frame" src="http://bbs.06climate.com/data/attachment/album/201911/06/103331k16e7q5x1f6ekhhq.jpg" />
</html>

双线框是double
虚线框是dashed

15195775117 · 发表于 2019-11-12 10:31:54

半透明

15195775117 · 发表于 2019-11-12 11:10:51

圆角框

左图是10%的，右图是50%，
百分比代表占边长的比例，所以，50%的圆角最大了

<style type="text/css">
ima{width:200px;}
.border{border-radius:50%}
</style>
<img class="border" src="http://bbs.06climate.com/data/attachment/album/201911/06/103331k16e7q5x1f6ekhhq.jpg" />

15195775117 · 发表于 2019-11-12 11:18:55

图片投影

		自动登录	找回密码
密码			立即注册