CSS3快速上手之18：图片的格式操作

最新推荐文章于 2024-04-04 12:04:33 发布

Owen的Blog

最新推荐文章于 2024-04-04 12:04:33 发布

阅读量290

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/u011775523/article/details/52782443

版权

HTML 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

22 篇文章 0 订阅

订阅专栏

1.代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页title</title> 
<style>

/*---范例1：设定圆角---*/
.c1 {
    border-radius: 8px;
}

/*---范例2：设定椭圆形---*/
.c2 {
    border-radius: 50px;
}

/*---范例3：创建缩略图---*/
.c3 {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

</style>
</head>
<body>

<h2>范例1：圆角图片</h2>
<img class="c1" src="paris.jpg" alt="Paris" width="200" height="150">

<h2>范例2：椭圆形图片</h2>
<img class="c2" src="paris.jpg" alt="Paris" width="200" height="150">

<h2>范例3：创建缩略图同时作为连接</h2>
<a target="_blank" href="paris.jpg">
<img class="c3" src="paris.jpg" alt="Paris" width="80" height="60"></a>

</body>
</html>

2.本范例所需的素材：(paris.jpg)