编程 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 相关文章推荐

解决margin 外边距合并问题

Jul 03 HTML / CSS

html5嵌入内容_动力节点Java学院整理

Jul 07 HTML / CSS

在HTML5 canvas里用卷积核进行图像处理的方法

May 02 HTML / CSS

HTML4和HTML5之间除了相似以外的10个主要不同

Dec 13 HTML / CSS

HTML5 Canvas draw方法制作动画效果示例

Jul 11 HTML / CSS

HTML5新增的8类INPUT输入类型介绍

Jul 06 HTML / CSS

html5 canvas移动浏览器上实现图片压缩上传

Mar 11 HTML / CSS

HTML5无刷新改变当前url的代码

Mar 15 HTML / CSS

Canvas制作的下雨动画的示例

Mar 06 HTML / CSS

html5的input的required使用中遇到的问题及解决方法

Apr 24 HTML / CSS

HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码

Apr 10 HTML / CSS

详解CSS玩转图片Base64编码

May 25 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＋AJAX实现无刷新注册（带用户名实时检测）

2006/12/02 PHP

php注册和登录界面的实现案例(推荐)

2016/10/24 PHP

tp5(thinkPHP5)框架连接数据库的方法示例

2018/12/24 PHP

laravel框架邮箱认证实现方法详解

2019/11/22 PHP

[原创]后缀就扩展名为js的文件是什么文件

2007/12/06 Javascript

jQuery 位置插件

2008/12/25 Javascript

网页图片延时加载的js代码

2010/04/22 Javascript

鼠标右击事件代码(asp.net后台)

2011/01/27 Javascript

jQuery:节点(插入,复制,替换,删除)操作

2013/03/04 Javascript

JS实现的网页倒计时数字时钟效果

2015/03/02 Javascript

学做Bootstrap的第一个页面

2016/05/15 HTML / CSS

JS实现全屏的四种写法

2016/12/30 Javascript

JavaScript运动框架解决防抖动问题、悬浮对联（二）

2017/05/17 Javascript

Angularjs实现下拉框联动的示例代码

2017/08/22 Javascript

实现jquery放大镜的两种方法

2018/02/22 jQuery

ES6下子组件调用父组件的方法(推荐)

2018/02/23 Javascript

node读写Excel操作实例分析

2019/11/06 Javascript

微信小程序实现树莓派（raspberry pi）小车控制

2020/02/12 Javascript

零基础写python爬虫之爬虫编写全记录

2014/11/06 Python

Python异常对代码运行性能的影响实例解析

2018/02/08 Python

python flask框架实现重定向功能示例

2019/07/02 Python

pandas基于时间序列的固定时间间隔求均值的方法

2019/07/04 Python

python读写csv文件方法详细总结

2019/07/05 Python

python3.7 使用pymssql往sqlserver插入数据的方法

2019/07/08 Python

python取均匀不重复的随机数方式

2019/11/27 Python

pycharm 使用tab跳出正在编辑的括号(){}{}等问题

2021/02/26 Python

西班牙家用电器和电子产品购物网站：Mi Electro

2019/02/25 全球购物

NYX Professional Makeup官方网站：专业彩妆和美容产品

2019/10/29 全球购物

人力资源管理专业学生自我评价

2013/11/20 职场文书

高中毕业生登记表自我鉴定范文

2014/03/18 职场文书

档案工作个人总结

2015/03/03 职场文书

作息时间调整通知

2015/04/22 职场文书

升学宴来宾致辞

2015/07/27 职场文书

2016春季小学开学寄语

2015/12/03 职场文书

祝福语集锦：朋友新店开业祝福语

2019/12/10 职场文书

浅谈tf.train.Saver()与tf.train.import_meta_graph的要点

2021/05/26 Python