CSS3制作圆角图片和椭圆形图片

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS3,圆角,椭圆形等相关知识,佚名希望在学习及工作中可以帮助到您

本文实例为大家分享了CSS3制作圆角和椭圆形图片的方法，供大家参考，具体内容如下

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>

2、椭圆形图片

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持微课江湖。

您可能想查找下面的文章:

相关文章

2017-08-06纯css实现3D图像轮转效果
2017-08-06浅析CSS实现水平垂直同时居中的5种思路
2017-08-06div 背景透明度如何设置一个div的背景透明度
2017-08-06css(display,float,position)深入理解
2017-08-06使用CSS为文档添加样式的简单示例
2017-08-06CSS3实现千变万化的文字阴影text-shadow效果设计
2017-08-06css实现的滑动鼠标到img后切换图片移开恢复默认
2017-08-06火狐和谷歌兼容性问题示例探讨
2017-08-06多重CSS背景动画实现方法示例
2017-08-06网页制作 css让页面居中对齐