编程 HTML / CSS

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

Posted in HTML / CSS onJuly 08, 2016

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

1、圆角图片

XML/HTML Code复制内容到剪贴板

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

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

2、椭圆形图片

XML/HTML Code复制内容到剪贴板

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

CSS3模拟动画下拉菜单效果

Apr 12 HTML / CSS

CSS3实现酷炫的3D旋转透视效果

Nov 21 HTML / CSS

HTML5 Web 存储详解

Sep 16 HTML / CSS

HTML5 微格式和相关的属性名称

Feb 10 HTML / CSS

css 如何让背景图片拉伸填充避免重复显示

Jul 11 HTML / CSS

html5拍照功能实现代码(htm5上传文件)

Dec 11 HTML / CSS

html5各种页面切换效果和模态对话框用法总结

Dec 15 HTML / CSS

简单介绍HTML5中的文件导入

May 08 HTML / CSS

图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

Jan 20 HTML / CSS

Html5实现移动端、PC端刮刮卡效果

Jun 30 HTML / CSS

HTML5 文件域+FileReader 分段读取文件并上传到服务器

Oct 23 HTML / CSS

html2canvas生成的图片偏移不完整的解决方法

May 19 HTML / CSS

css3media响应式布局实例

Jul 08 #HTML / CSS

使用CSS3的ruby-position固定注音位置的用法示例

Jul 05 #HTML / CSS

CSS3中Transition动画属性用法详解

Jul 04 #HTML / CSS

CSS3中Animation动画属性用法详解

Jul 04 #HTML / CSS

CSS3圆角边框和边界图片效果实例

Jul 01 #HTML / CSS

CSS3制作酷炫的三维相册效果

Jul 01 #HTML / CSS

CSS3的column-fill属性对齐列内容高度的用法详解

Jul 01 #HTML / CSS

You might like

第十四节--命名空间

2006/11/16 PHP

Thinkphp模板中截取字符串函数简介

2014/06/17 PHP

跟我学Laravel之配置Laravel

2014/10/15 PHP

php更新mysql后获取改变行数的方法

2014/12/25 PHP

1亿条数据如何分表100张到Mysql数据库中（PHP）

2015/07/29 PHP

thinkPHP分页功能实例详解

2017/05/05 PHP

javaScript - 如何引入js代码

2021/03/09 Javascript

js查找父节点的简单方法

2008/06/28 Javascript

在模板页面的js使用办法

2010/04/01 Javascript

基于jquery & json的省市区联动代码

2012/06/26 Javascript

解析JavaScript中instanceof对于不同的构造器或许都返回true

2013/12/03 Javascript

使用javascript为网页增加夜间模式

2014/01/26 Javascript

详解用node-images 打造简易图片服务器

2017/05/08 Javascript

angular.fromJson与toJson方法用法示例

2017/05/17 Javascript

vue元素实现动画过渡效果

2017/07/01 Javascript

利用Javascript实现一套自定义事件机制

2017/12/14 Javascript

小程序实现多选框功能

2018/10/30 Javascript

发布Angular应用至生产环境的方法

2018/12/10 Javascript

vue远程加载sfc组件思路详解

2019/12/25 Javascript

JS script脚本中async和defer区别详解

2020/06/24 Javascript

在Django的URLconf中使用多个视图前缀的方法

2015/07/18 Python

Django Admin 实现外键过滤的方法

2017/09/29 Python

Python爬虫包BeautifulSoup学习实例（五）

2018/06/17 Python

Python基于Opencv来快速实现人脸识别过程详解（完整版）

2019/07/11 Python

用django设置session过期时间的方法解析

2019/08/05 Python

Python文件操作基础流程解析

2020/03/19 Python

Python3以GitHub为例来实现模拟登录和爬取的实例讲解

2020/07/30 Python

美体小铺加拿大官方网站：The Body Shop加拿大

2016/10/30 全球购物

MyHeritage美国：家族史研究和DNA测试的领先服务

2019/05/27 全球购物

Java Servlet API中forward() 与redirect()的区别

2014/04/20 面试题

银行存款证明样本

2014/01/17 职场文书

高二化学教学反思

2014/01/30 职场文书

个人党性分析总结

2015/03/05 职场文书

党支部季度考核意见

2015/06/02 职场文书

经典格言警句：没有热忱，世间便无进步

2019/11/13 职场文书

Js类的构建与继承案例详解

2021/09/15 Javascript