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

image-set实现Retina屏幕下图片显示详细介绍

Dec 24 HTML / CSS

图解CSS3制作圆环形进度条的实例教程

May 26 HTML / CSS

利用CSS3实现开门效果实例源码

Aug 22 HTML / CSS

用CSS3实现无限循环的无缝滚动的实例代码

Jul 04 HTML / CSS

css3 column实现卡片瀑布流布局的示例代码

Jun 22 HTML / CSS

HTML5之SVG 2D入门7—SVG元素的重用与引用

Jan 30 HTML / CSS

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

Jun 30 HTML / CSS

详解WebSocket跨域问题解决

Aug 06 HTML / CSS

详解HTML5将footer置于页面最底部的方法(CSS+JS)

Oct 11 HTML / CSS

浅析canvas元素的html尺寸和css尺寸对元素视觉的影响

Jul 22 HTML / CSS

AmazeUI折叠式卡片布局，整合内容列表、表格组件实现

Aug 20 HTML / CSS

解决flex布局中子项目尺寸不受flex-shrink限制

May 11 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 Directory 函数的详解

2013/03/07 PHP

php中限制ip段访问、禁止ip提交表单的代码分享

2014/08/22 PHP

FastCGI 进程意外退出造成500错误

2015/07/26 PHP

PHP去除字符串最后一个字符的三种方法实例

2017/03/01 PHP

javascript concat数组累加示例

2009/09/03 Javascript

有关JavaScript的10个怪癖和秘密分享

2011/08/28 Javascript

修改或扩展jQuery原生方法的代码实例

2015/01/13 Javascript

jQuery文本框得到与失去焦点动态改变样式效果

2016/09/08 Javascript

详解为Angular.js内置$http服务添加拦截器的方法

2016/12/20 Javascript

JSON在Javascript中的使用（eval和JSON.parse的区别）详细解析

2017/09/05 Javascript

json2.js 入门教程之使用方法与实例分析

2017/09/14 Javascript

vue实现图书管理demo详解

2017/10/17 Javascript

Angular 项目实现国际化的方法

2018/01/08 Javascript

jQuery利用FormData上传文件实现批量上传

2018/12/04 jQuery

JavaScript模板引擎原理与用法详解

2018/12/24 Javascript

微信小程序性能优化之checkSession的使用

2019/03/06 Javascript

一文快速了解JQuery中的AJAX

2019/05/31 jQuery

vue实现倒计时获取验证码效果

2020/04/17 Javascript

使用Vant完成Dialog弹框案例

2020/11/11 Javascript

Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

2021/01/22 Vue.js

[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

Python入门篇之列表和元组

2014/10/17 Python

Python找出list中最常出现元素的方法

2016/06/14 Python

Python实现桶排序与快速排序算法结合应用示例

2017/11/22 Python

Python3生成手写体数字方法

2018/01/30 Python

Python使用folium excel绘制point

2019/01/03 Python

Python中遍历列表的方法总结

2019/06/27 Python

pandas 数据类型转换的实现

2020/12/29 Python

波兰最早的运动鞋精品店之一：Street Supply

2019/08/29 全球购物

Java模拟试题

2014/11/10 面试题

外企财务年会演讲稿

2014/01/03 职场文书

群众路线教育实践活动民主生活会个人检查对照思想汇报

2014/10/04 职场文书

贫民窟的百万富翁观后感

2015/06/09 职场文书

军训后的感想

2015/08/07 职场文书

Redis延迟队列和分布式延迟队列的简答实现

2021/05/13 Redis

Html5大屏数据可视化开发的实现

2021/06/11 HTML / CSS