编程 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 矩阵的使用详解

Mar 20 HTML / CSS

html5仿支付宝密码框的实现代码

Sep 06 HTML / CSS

值得收藏的HTML5资源(学习html5的朋友可以收藏下)

Jul 20 HTML / CSS

IE9下html5初试小刀

Sep 21 HTML / CSS

HTML5上传文件显示进度的实现代码

Aug 30 HTML / CSS

HTML5自定义data-* data(obj)属性和jquery的data()方法的使用

Dec 13 HTML / CSS

HTML5和以前HTML4的区别整理

Oct 20 HTML / CSS

HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

May 08 HTML / CSS

巧用HTML5给按钮背景设计不同的动画简单实例

Aug 09 HTML / CSS

HTML5新增加标签和功能概述

Sep 05 HTML / CSS

HTML5中input输入框默认提示文字向左向右移动的示例代码

Sep 10 HTML / CSS

使用CSS实现百叶窗效果示例代码

May 07 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常用操作类之通信数据封装类的实现

2017/07/16 PHP

ExtJS Window 最小化的一种方法

2009/11/18 Javascript

原生javascript实现图片轮播效果代码

2010/09/03 Javascript

jquery选择器的选择使用及性能介绍

2013/01/16 Javascript

jquery实现图片左右间隔滚动特效(可自动播放)

2013/05/08 Javascript

jQuery树形下拉菜单特效代码分享

2015/08/15 Javascript

关于JavaScript 原型链的一点个人理解

2016/07/31 Javascript

详解jQuery的表单验证插件--Validation

2016/12/21 Javascript

nodejs获取微信小程序带参数二维码实现代码

2017/04/12 NodeJs

令按钮悬浮在(手机)页面底部的实现方法

2017/05/02 Javascript

JavaScript显式数据类型转换详解

2019/03/18 Javascript

js控制随机数生成概率代码实例

2019/03/21 Javascript

原生JS实现九宫格抽奖

2020/09/13 Javascript

js实现日历

2020/11/07 Javascript

用Python写冒泡排序代码

2016/04/12 Python

Python实现视频下载功能

2017/03/14 Python

pytorch + visdom CNN处理自建图片数据集的方法

2018/06/04 Python

python 读取.csv文件数据到数组(矩阵)的实例讲解

2018/06/14 Python

Python WSGI的深入理解

2018/08/01 Python

python提取具有某种特定字符串的行数据方法

2018/12/11 Python

Python实现E-Mail收集插件实例教程

2019/02/06 Python

python3 小数位的四舍五入(用两种方法解决round 遇5不进)

2019/04/11 Python

使用虚拟环境打包python为exe 文件的方法

2019/08/29 Python

Window系统下Python如何安装OpenCV库

2020/03/05 Python

tensorflow pb to tflite 精度下降详解

2020/05/25 Python

Python3如何使用range函数替代xrange函数

2020/10/05 Python

Funko官方商店：源自美国，畅销全球搪胶收藏玩偶

2018/09/15 全球购物

打架检讨书100字

2014/01/19 职场文书

运动会跳远广播稿

2014/02/04 职场文书

三月学雷锋月活动总结

2014/04/28 职场文书

2014领导班子正风肃纪思想汇报

2014/09/18 职场文书

2015入党个人自传范文

2015/06/26 职场文书

重阳节活动主持词

2015/07/04 职场文书

2016习总书记系列重要讲话心得体会

2016/01/15 职场文书

社交电商模式的兴起：这些新的商机千万别错过

2019/07/26 职场文书

element多个表单校验的实现

2021/05/27 Javascript