编程 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 给页面加个半圆形导航条主要利用旋转和倾斜样式

Feb 10 HTML / CSS

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

Apr 03 HTML / CSS

常用的四种CSS透明属性介绍

Apr 12 HTML / CSS

纯CSS实现的大小渐变、渐远效果

Apr 15 HTML / CSS

使用CSS3制作版头动画效果

Dec 24 HTML / CSS

HTML5中的nav标签学习笔记

Jun 24 HTML / CSS

css3 transform 3d 使用css3创建动态3d立方体(html5实践)

Jan 06 HTML / CSS

html5中canvas学习笔记1-画板的尺寸与实际显示尺寸

Jan 06 HTML / CSS

html5的canvas实现3d雪花飘舞效果

Dec 27 HTML / CSS

html5菜单折纸效果

Apr 22 HTML / CSS

html5移动端价格输入键盘的实现

Sep 16 HTML / CSS

利用html+css实现菜单栏缓慢下拉效果的示例代码

Mar 30 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

基于mysql的论坛（4）

2006/10/09 PHP

php设计模式之单例、多例设计模式的应用分析

2013/06/30 PHP

PHP 登录完成后如何跳转上一访问页面

2014/01/14 PHP

分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)

2014/01/30 PHP

php开启与关闭错误提示适用于没有修改php.ini的权限

2014/10/16 PHP

php使用递归计算文件夹大小

2014/12/24 PHP

Javascript !!的作用

2008/12/04 Javascript

JavaScript 继承机制的实现(待续)

2010/05/18 Javascript

JQuery.Ajax之错误调试帮助信息介绍

2013/07/04 Javascript

jQuery实现可收缩展开的级联菜单实例代码

2013/11/27 Javascript

原生JS实现美图瀑布流布局赏析

2015/09/07 Javascript

js获取新浪天气接口的实现代码

2016/06/06 Javascript

JavaScript中windows.open()、windows.close()方法详解

2016/07/28 Javascript

Javascript中indexOf()和lastIndexOf应用方法实例

2016/08/24 Javascript

JS排序之选择排序详解

2017/04/08 Javascript

详解Vue源码学习之callHook钩子函数

2018/07/25 Javascript

layui table 表格模板按钮的实例代码

2019/09/21 Javascript

vue选项卡切换登录方式小案例

2019/09/27 Javascript

Vue中jsx不完全应用指南小结

2019/11/01 Javascript

[03:40]DOTA2亚洲邀请赛小组赛第二日赛事回顾

2015/01/31 DOTA

python使用webbrowser浏览指定url的方法

2015/04/04 Python

Python实现截屏的函数

2015/07/25 Python

TensorFlow实现随机训练和批量训练的方法

2018/04/28 Python

python3连接MySQL数据库实例详解

2018/05/24 Python

Python实例方法、类方法、静态方法的区别与作用详解

2019/03/25 Python

PyCharm搭建Spark开发环境实现第一个pyspark程序

2019/06/13 Python

python算法题链表反转详解

2019/07/02 Python

Python装饰器原理与基本用法分析

2020/01/07 Python

Python 如何批量更新已安装的库

2020/05/26 Python

python中编写函数并调用的知识点总结

2021/01/13 Python

HTML5 预加载让页面得以快速呈现

2013/08/13 HTML / CSS

商场经理竞聘演讲稿

2014/01/01 职场文书

中国好声音华少广告词

2014/03/17 职场文书

2014医学院领导班子对照检查材料思想汇报

2014/09/19 职场文书

职工趣味运动会开幕词

2016/03/04 职场文书

MySQL 8.0 Online DDL快速加列的相关总结

2021/06/02 MySQL