编程 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和jquery实现可伸缩搜索框

Feb 12 HTML / CSS

使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法

Apr 03 HTML / CSS

CSS3实现闪烁动画效果的方法

Feb 09 HTML / CSS

CSS3 box-sizing属性详解

Nov 15 HTML / CSS

让IE支持HTML5的方法

Dec 11 HTML / CSS

HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍

Jan 31 HTML / CSS

使用纯HTML5编写一款网页上的时钟的代码分享

Nov 16 HTML / CSS

H5调用相机拍照并压缩图片的实例代码

Jul 20 HTML / CSS

Html5页面内使用JSON动画的实现

Jan 29 HTML / CSS

webView加载html图片遇到的问题解决

Oct 08 HTML / CSS

css 边框添加四个角的实现代码

Oct 16 HTML / CSS

CSS中float高度塌陷问题的四种解决方案

Apr 18 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

解析php二分法查找数组是否包含某一元素

2013/05/23 PHP

解析PHP正则提取或替换img标记属性

2013/06/26 PHP

PHP导出Excel实例讲解

2016/01/24 PHP

使用Zttp简化Guzzle 调用

2017/07/02 PHP

枚举JavaScript对象的函数

2006/12/22 Javascript

javascript操作cookie的文章(设置，删除cookies)

2010/04/01 Javascript

js异常捕获方法介绍

2013/04/10 Javascript

js实时获取系统当前时间实例代码

2013/06/28 Javascript

Javascript拓展String方法小结

2013/07/08 Javascript

一行命令搞定node.js 版本升级

2014/07/20 Javascript

javascript学习笔记（四）function函数部分

2014/09/30 Javascript

JavaScript模拟实现键盘打字效果

2015/06/29 Javascript

bootstrap监听滚动实现头部跟随滚动

2016/11/08 Javascript

js实现手机发送验证码功能

2017/03/13 Javascript

JavaScript条件判断_动力节点Java学院整理

2017/06/26 Javascript

VsCode插件整理（小结）

2017/09/14 Javascript

vue中nextTick用法实例

2019/09/11 Javascript

layui 上传文件_批量导入数据UI的方法

2019/09/23 Javascript

[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略

2017/03/23 DOTA

[03:21]【TI9纪实】Old Boys

2019/08/23 DOTA

wxPython定时器wx.Timer简单应用实例

2015/06/03 Python

python实现下载文件的三种方法

2017/02/09 Python

关于sys.stdout和print的区别详解

2019/12/05 Python

Python 定义只读属性的实现方式

2020/03/05 Python

Python定义一个Actor任务

2020/07/29 Python

Python 数据的累加与统计的示例代码

2020/08/03 Python

美国羊皮公司：Overland

2018/01/15 全球购物

2014年环境卫生工作总结

2014/11/24 职场文书

员工福利申请报告

2015/05/15 职场文书

创业计划书之牛肉汤快餐店

2019/10/08 职场文书

2019年关于小学生课外阅读情况的分析报告

2019/12/02 职场文书

详解MySQL连接挂死的原因

2021/05/18 MySQL

使用ORM新增数据在Mysql中的操作步骤

2021/07/26 MySQL

python基础之错误和异常处理

2021/10/24 Python

Vue+TypeScript中处理computed方式

2022/04/02 Vue.js

科学家研发出新型速效酶，可在 24 小时内降解塑料制品

2022/04/29 数码科技