编程 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制作翻转效果_动力节点Java学院整理

Jul 11 HTML / CSS

CSS3的文字阴影—text-shadow的使用方法

Dec 25 HTML / CSS

css3实现背景图片拉伸效果像桌面壁纸一样

Aug 19 HTML / CSS

css3进行截取替代js的substring

Sep 02 HTML / CSS

纯CSS3打造动感漂亮时尚的扇形菜单

Mar 18 HTML / CSS

使用CSS3的ruby-position固定注音位置的用法示例

Jul 05 HTML / CSS

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

Dec 06 HTML / CSS

css3遮罩层镂空效果的多种实现方法

May 11 HTML / CSS

html5新增的定时器requestAnimationFrame实现进度条功能

Dec 13 HTML / CSS

X/HTML5 和 XHTML2

Oct 17 HTML / CSS

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

Apr 25 HTML / CSS

HTML5 Canvas实现烟花绽放特效

Mar 02 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插入排序实现代码

2013/04/04 PHP

PHP中的str_repeat函数在JavaScript中的实现

2013/09/16 PHP

php_screw安装使用教程（另一个PHP代码加密实现）

2014/05/29 PHP

php上传图片生成缩略图（GD库）

2016/01/06 PHP

thinkPHP框架实现多表查询的方法

2018/06/14 PHP

PHP使用PDO、mysqli扩展实现与数据库交互操作详解

2019/07/20 PHP

TP - 比RBAC更好的权限认证方式（Auth类认证）

2021/03/09 PHP

FF IE兼容性的修改小结

2009/09/02 Javascript

setTimeout与setInterval在不同浏览器下的差异

2010/01/24 Javascript

javascript数组的使用

2013/03/28 Javascript

JavaScript初学者建议：不要去管浏览器兼容

2014/02/04 Javascript

ionic js 模型 $ionicModal 可以遮住用户主界面的内容框

2016/06/06 Javascript

利用Angularjs中模块ui-route管理状态的方法

2016/12/27 Javascript

浅谈vue实现数据监听的函数 Object.defineProperty

2017/06/08 Javascript

SelectPage v2.4 发布新增纯下拉列表和关闭分页功能

2017/09/07 Javascript

javaScript canvas实现(画笔大小颜色橡皮的实例)

2017/11/28 Javascript

JS在if中的强制类型转换方式

2018/07/15 Javascript

详解vue项目中调用百度地图API使用方法

2019/04/25 Javascript

原生js实现的移动端可拖动进度条插件功能详解

2019/08/15 Javascript

django xadmin 管理器常用显示设置方式

2020/03/11 Python

Python多线程操作之互斥锁、递归锁、信号量、事件实例详解

2020/03/24 Python

tensorflow pb to tflite 精度下降详解

2020/05/25 Python

Python高阶函数与装饰器函数的深入讲解

2020/11/10 Python

DC Shoes官网：美国滑板鞋和服饰品牌

2017/09/03 全球购物

Bed Bath & Beyond加拿大官网：购买床上用品、浴巾、厨房电器等

2019/10/04 全球购物

Sahajan美国：阿育吠陀护肤品牌

2021/01/09 全球购物

五年级音乐教学反思

2014/02/06 职场文书

领导接待方案

2014/03/13 职场文书

个人查摆剖析材料

2014/10/16 职场文书

客服专员岗位职责范本

2015/04/07 职场文书

公司捐书倡议书

2015/04/27 职场文书

nginx location中多个if里面proxy_pass的方法

2021/03/31 Servers

sql注入教程之类型以及提交注入

2021/08/02 MySQL

Go语言实现一个简单的并发聊天室的项目实战

2022/03/18 Golang

openEuler 搭建java开发环境的详细过程

2022/06/10 Servers

输入框跟随文字内容适配宽实现示例

2022/08/14 Javascript