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

HTML+CSS3 模仿Windows7 桌面效果

Jun 17 HTML / CSS

CSS实现圆形放大镜狙击镜效果只有圆圈里的放大

Dec 10 HTML / CSS

CSS3控制HTML元素动画效果

Feb 08 HTML / CSS

CSS3媒体查询Media Queries基础学习教程

Feb 29 HTML / CSS

CSS3 不定高宽垂直水平居中的几种方式

Mar 26 HTML / CSS

涂鸦板简单实现 Html5编写属于自己的画画板

Jul 05 HTML / CSS

HTML5 离线应用之打造零请求、无流量网站的解决方法

Apr 25 HTML / CSS

HTML5 的新的表单元素(datalist/keygen/output)使用介绍

Jul 19 HTML / CSS

HTML5拖拽功能实现的拼图游戏

Jul 31 HTML / CSS

浅析HTML5中的download属性使用

Mar 13 HTML / CSS

Html5移动端div固定到底部实现底部导航条的几种方式

Mar 09 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 GD绘制24小时柱状图

2008/06/28 PHP

[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】

2017/09/02 PHP

Javascript中的数学函数集合

2007/05/08 Javascript

jQuery控制输入框只能输入数值的小例子

2013/03/20 Javascript

用JavaScript获取DOM元素位置和尺寸大小的方法

2013/04/12 Javascript

js为数字添加逗号并格式化数字的代码

2013/08/23 Javascript

JSF中confirm弹出框的用法示例介绍

2014/01/07 Javascript

使用javascript获取页面名称

2014/12/23 Javascript

JavaScript基础函数整理汇总

2015/01/30 Javascript

jQuery封装的tab选项卡插件分享

2015/06/16 Javascript

JS特效实现图片自动播放并可控的效果

2015/07/31 Javascript

dedecms页面如何获取会员状态的实例代码

2016/03/15 Javascript

async/await与promise（nodejs中的异步操作问题）

2017/03/03 NodeJs

AngularJS之自定义服务详解(factory、service、provider)

2017/04/14 Javascript

原生js jquery ajax请求以及jsonp的调用方法

2017/08/04 jQuery

动态Axios的配置步骤详解

2018/01/12 Javascript

一次记住JavaScript的6个正则表达式方法

2018/02/22 Javascript

微信小程序如何获取用户收货地址

2018/11/27 Javascript

[05:45]Ti4观战指南（下）

2014/07/07 DOTA

详解在Python的Django框架中创建模板库的方法

2015/07/20 Python

Python基于贪心算法解决背包问题示例

2017/11/27 Python

python3学习笔记之多进程分布式小例子

2018/02/13 Python

python实现数据写入excel表格

2018/03/25 Python

Numpy截取指定范围内的数据方法

2018/11/14 Python

Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)

2020/02/13 Python

Python+PyQt5实现灭霸响指功能

2020/05/25 Python

keras K.function获取某层的输出操作

2020/06/29 Python

Old Navy加拿大官网：美式休闲服饰品牌

2017/09/26 全球购物

世界顶级足球门票网站：Live Football Tickets

2017/10/14 全球购物

英国知名小木屋定制网站：Tiger Sheds

2020/03/06 全球购物

婚前协议书范本

2014/04/15 职场文书

师德师风个人总结

2015/02/06 职场文书

小人国观后感

2015/06/11 职场文书

2016党员干部廉政准则学习心得体会

2016/01/20 职场文书

成本低的5个创业项目：投资小、赚钱快

2019/08/20 职场文书

redis数据一致性的实现示例

2022/03/18 Redis