CSS3 图片

A_山水子农

于 2016-07-07 19:19:47 发布

629

分类专栏： CSS3 文章标签： CSS3 图片 CSS3 图片

本文链接：https://blog.csdn.net/qq_27626333/article/details/51853654

版权

CSS3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1、圆角图片

<!DOCTYPE html>
<html>
<head>
<style>
img {
    border-radius: 8px;
}
</style>
</head>
<body>
<h2>圆角图片</h2>
<p>使用 border-radius 属性来创建圆角图片:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
img {
    border-radius: 50%;
}
</style>
</head>
<body>
<h2>椭圆形图片</h2>
<p>使用 border-radius 属性来创建椭圆形图片：</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>

2、缩略图

我们使用 border 属性来创建缩略图

<!DOCTYPE html>
<html>
<head>
<style>
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}
</style>
</head>
<body>
<h2>缩略图</h2>
<p>我们使用 border 属性来创建缩略图。</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}
a:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>
<h2>缩略图作为连接</h2>
<p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>
<p>点击图片查看效果：</p>
<a target="_blank" href="paris.jpg">
  <img src="paris.jpg" alt="Paris" width="400" height="300">
</a>
</body>
</html>

3、响应式图片

响应式图片会自动适配各种尺寸的屏幕

<!DOCTYPE html>
<html>
<head>
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>
</head>
<body>
<h2>响应式图片</h2>
<p>响应式图片会自动适配各种尺寸的屏幕。</p>
<p>通过重置浏览器大小查看效果:</p>
<img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
</body>
</html>

4、图片文本

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
}
.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}
img {
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>
<h2>图片文本</h2>
<p>在图片左上角添加文本信息:</p>
<div class="container">
  <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topleft">左上角</div>
</div>
</body>
</html>

5、卡片式图片

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:25px;}
div.polaroid {
  width: 40%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}
div.container {
  text-align: center;
  padding: 10px 20px;
}
</style>
</head>
<body>
<h2>响应式卡片</h2>
<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>The Troll's tongue in Hardanger, Norway</p>
  </div>
</div>
</body>
</html>

A_山水子农

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3 图片

1、圆角图片img { border-radius: 8px;}圆角图片使用 border-radius 属性来创建圆角图片: img { border-radius: 50%;}椭圆形图片使用 border-radius 属性来创建椭圆形图片： 2、缩略图我们使用 border 属性来创建
复制链接

扫一扫