CSS(六)——用 CSS 设置图像效果
发布于: 2021 年 01 月 27 日
![CSS(六)——用CSS设置图像效果](https://static001.geekbang.org/infoq/3f/3fd7954fe1536ad18fd3bd9d31f4db18.png)
1.设置图像边框
下面给出四种图像边框的样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.c1{
border-width: 5px;
border-color: red;
border-style: solid;
}
.c2{
/* 虚线边框 */
border: 5px red dashed;
}
.c3{
/* 点画线边框 */
border: 5px red dotted;
}
.c4{
border-top: 5px red dotted;
border-left: 5px blue solid;
border-bottom: 5px red dashed;
border-right: 5px blue solid;
}
</style>
</head>
<body>
<h1>实线边框</h1>
<img src="fj1.jpg" class="c1"/>
<h1>虚线边框</h1>
<img src="fj1.jpg" class="c2"/>
<h1>点画线边框</h1>
<img src="fj1.jpg" class="c3"/>
<h1>给不同的边框设置样式</h1>
<img src="fj1.jpg" class="c4"/>
</body>
</html>
复制代码
运行结果分别是:
![](https://static001.geekbang.org/infoq/ec/ec1f8b389cc5c2955358b084f7e6235c.png)
![](https://static001.geekbang.org/infoq/17/178dd2e902afbafb7fda79b113794daa.png)
注意:平常我们设置图像边框的时候一般 border-width 设置为 2px 即可!
2.设置图片大小
设置大小有两种方式,一种是设置宽高的具体值,一种是设置百分比大小;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.c1{
width:180px;
height:200px;
}
.c2{
width:20%;
}
</style>
</head>
<body>
<h1>图片大小</h1>
<img src="fj1.jpg" class="c1"/>
<h1>图片缩放</h1>
<img src="fj1.jpg" class="c2"/>
</body>
</html>
复制代码
运行结果:
![](https://static001.geekbang.org/infoq/fd/fd26073d6eab71b4f87278bfe7099548.png)
注意:这里的图片缩小 20%是指当前图片相对于图片的容器大小而言,而且设置宽 width 为 20%,其高 height 也相对应的缩小,不会影响图片的观赏!
3.图文混排
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img{
width:180px;
height:200px;
/* 图片向左悬浮,文本围绕在右边 */
float:left;
margin:5px;
}
</style>
</head>
<body>
<h1>图文混排</h1>
<img src="fj1.jpg"/>
<p>
凤凰古城,位于湖南省湘西土家族苗族自治州的西南部,土地总面积约10平方千米。2010年底约5万人口,由苗族、汉族、土家族等28个民族组成,为典型的少数民族聚居区。
</p>
<p>
陵山脉南部,云贵高原东侧,距州府吉首市52公里。东经为109°18′至109°48′之间,北纬27°44′至28°19′之间。与贵州省为邻。东与泸溪县交界,南与麻阳县相连,西同贵州省铜仁市、松桃苗族自治县接壤,北和吉首市、花垣县毗邻,史称“西托云贵,东控辰沅,北制川鄂,南扼桂边”。
</p>
<p>
凤凰古城地形复杂,东部及东南角的河谷丘陵地带为第一级台阶,以低山、高丘为主、兼有岗地及部分河谷平地、地表切割破碎,谷狭坡陡,一般海拔在500米以下。从东北到西南的中间地带为第二级台阶,海拔500~800米。西北部中山地带为第三级台阶,海拔在800米以上。
</p>
</body>
</html>
复制代码
运行结果:
![](https://static001.geekbang.org/infoq/51/51cb2e4a0295f31d5ce184e2cff1d084.png)
4.设置图片与文字的对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{
border:1px red solid;
}
</style>
</head>
<body>
<h1>设置图片与文字的对齐方式</h1>
<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>
复制代码
运行结果:
![](https://static001.geekbang.org/infoq/7c/7cf67ace74272772abf6f07a5da3123f.png)
![](https://static001.geekbang.org/infoq/4d/4dfe7d01516557af9ec20361f7be1add.png)
各种对齐方式的区别如上图所示!
我是【程序员的时光】,热爱技术分享,信仰终身学习,爱健身,会点厨艺的热血青年,我们下期再见!
划线
评论
复制
发布于: 2021 年 01 月 27 日阅读数: 16
版权声明: 本文为 InfoQ 作者【程序员的时光】的原创文章。
原文链接:【http://xie.infoq.cn/article/03aba1b829d5ad62c6480215f】。文章转载请联系作者。
![用户头像](http://static001.geekbang.org/account/avatar/00/1e/5b/3f/57842896.jpg?x-oss-process=image/resize,w_200,h_200)
程序员的时光
关注
程序员的路,会越来越精彩! 2020.04.30 加入
公众号:程序员的时光 记录学习编程的一路时光,从小白到现在也能稳操胜券; 主要从事Java后台开发,数据结构与算法,设计模式等等; 欢迎一起交流,分享经验,学习进步!
评论