编程 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 clip-path 用法介绍详解

Mar 01 HTML / CSS

CSS3实现圆角、阴影、透明效果并兼容各大浏览器

Aug 08 HTML / CSS

CSS3的常见transformation图形变化用法小结

May 13 HTML / CSS

html5 Canvas画图教程(1)—画图的基本常识

Jan 09 HTML / CSS

html5 css3网站菜单实现代码

Dec 23 HTML / CSS

2014年圣诞节倒计时网页的制作过程

Dec 05 HTML / CSS

HTML5 Canvas的常用线条属性值总结

Mar 17 HTML / CSS

html5生成柱状图(条形图)效果的实例代码

Mar 25 HTML / CSS

iframe与window.onload如何使用详解

May 07 HTML / CSS

浅析HTML5 meta viewport参数

Oct 28 HTML / CSS

CSS3 制作的彩虹按钮样式

Apr 11 HTML / CSS

浅谈由position属性引申的css进阶讨论

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 EOT定界符的使用详解

2008/09/30 PHP

PHP用身份证号获取星座和生肖的方法

2013/11/07 PHP

不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术

2008/09/25 Javascript

兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)

2009/11/04 Javascript

jQuery 页面 Mask实现代码

2010/01/09 Javascript

使用js检测浏览器的实现代码

2013/05/14 Javascript

getAsDataURL在Firefox7.0下无法预览本地图片的解决方法

2013/11/15 Javascript

jquery分页插件jpaginate在IE中不兼容问题

2014/04/22 Javascript

Javascript设计模式之观察者模式(推荐)

2016/03/29 Javascript

angular实现表单验证及提交功能

2017/02/01 Javascript

基于canvas的二维码邀请函生成插件

2017/02/14 Javascript

jQuery鼠标移动图片上实现放大效果

2017/06/25 jQuery

使用InstantClick.js让页面提前加载200ms

2017/09/12 Javascript

10个在JavaScript开发中常遇到的BUG

2017/12/18 Javascript

json对象及数组键值的深度大小写转换问题详解

2018/03/30 Javascript

vscode 开发Vue项目的方法步骤

2018/11/25 Javascript

vue实现的组件兄弟间通信功能示例

2018/12/04 Javascript

javascript实现移动端上传图片功能

2020/08/18 Javascript

[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局

2016/03/05 DOTA

使用Python编写一个最基础的代码解释器的要点解析

2016/07/12 Python

Python 由字符串函数名得到对应的函数(实例讲解)

2017/08/10 Python

python数字图像处理实现直方图与均衡化

2018/05/04 Python

使用python爬虫获取黄金价格的核心代码

2018/06/13 Python

Python多线程原理与用法详解

2018/08/20 Python

Python使用POP3和SMTP协议收发邮件的示例代码

2019/04/16 Python

python logging 日志的级别调整方式

2020/02/21 Python

django前端页面下拉选择框默认值设置方式

2020/08/09 Python

详解如何获取localStorage最大存储大小的方法

2020/05/21 HTML / CSS

美国受信赖的教育产品供应商：Nest Learning

2018/06/14 全球购物

优秀学生干部推荐材料

2014/02/03 职场文书

化工操作工岗位职责

2014/04/29 职场文书

市场推广策划方案

2014/06/02 职场文书

优秀毕业生主要事迹材料

2015/11/04 职场文书

详解Vue的sync修饰符

2021/05/15 Vue.js

Python实现PIL图像处理库绘制国际象棋棋盘

2021/07/16 Python

解决MySQL添加新用户-ERROR 1045 (28000)的问题

2022/03/03 MySQL