爱气象,爱气象家园! 

气象家园

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

搜索
查看: 3362|回复: 5

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

[复制链接]

新浪微博达人勋

发表于 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>
如果只设置长宽其一,图片会保持长宽比,如果都设置则不会


密码修改失败请联系微信:mofangbao

新浪微博达人勋

 楼主| 发表于 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

密码修改失败请联系微信:mofangbao
回复 支持 反对

使用道具 举报

新浪微博达人勋

 楼主| 发表于 2019-11-12 10:03:30 | 显示全部楼层
本帖最后由 15195775117 于 2019-11-12 10:07 编辑

普通边框


普通边框.jpg

<!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


密码修改失败请联系微信:mofangbao
回复 支持 反对

使用道具 举报

新浪微博达人勋

 楼主| 发表于 2019-11-12 10:31:54 | 显示全部楼层
半透明
<style type="text/css">
ima{width:200px;}
.opacity{opacity:0.3}
</style>
<img class="opacity" src="http://bbs.06climate.com/data/attachment/album/201911/06/103331k16e7q5x1f6ekhhq.jpg" />
半透明.jpg

密码修改失败请联系微信:mofangbao
回复 支持 反对

使用道具 举报

新浪微博达人勋

 楼主| 发表于 2019-11-12 11:10:51 | 显示全部楼层

圆角框

圆角2.jpg 圆角.jpg


左图是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" />


密码修改失败请联系微信:mofangbao
回复 支持 反对

使用道具 举报

新浪微博达人勋

 楼主| 发表于 2019-11-12 11:18:55 | 显示全部楼层
图片投影


<style type="text/css">
ima{width:100px;}
.shadow{box-shadow:20px 20px 20px #06C}
</style>
<img class="shadow" src="http://bbs.06climate.com/data/attachment/album/201911/06/103331k16e7q5x1f6ekhhq.jpg" />

投影.jpg
密码修改失败请联系微信:mofangbao
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

Copyright ©2011-2014 bbs.06climate.com All Rights Reserved.  Powered by Discuz! (京ICP-10201084)

本站信息均由会员发表,不代表气象家园立场,禁止在本站发表与国家法律相抵触言论

快速回复 返回顶部 返回列表