编程 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 中实现炫酷的loading效果

Apr 26 HTML / CSS

细说CSS3中的选择符

Oct 17 HTML / CSS

CSS3哪些新特性值得称赞

Mar 02 HTML / CSS

css3 flex布局 justify-content:space-between 最后一行左对齐

Jan 02 HTML / CSS

HTML5 b和i标记将被赋予真正的语义

Jul 16 HTML / CSS

html5 Canvas画图教程(5)—canvas里画曲线之arc方法

Jan 09 HTML / CSS

HTML5 Canvas绘制圆点虚线实例

Jan 01 HTML / CSS

详解通过HTML5 Canvas实现图片的平移及旋转变化的方法

Mar 22 HTML / CSS

Canvas图片分割效果的实现

Jul 29 HTML / CSS

详解Html5项目适配系统深色模式方案总结

Apr 14 HTML / CSS

html5实现点击弹出图片功能

Jul 16 HTML / CSS

CSS+HTML 实现顶部导航栏功能

Aug 30 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

地摊中国 - 珍藏老照片

2020/08/18 杂记

用PHP+java实现自动新闻滚动窗口

2006/10/09 PHP

php getsiteurl()函数

2009/09/05 PHP

如何在PHP中使用正则表达式进行查找替换

2013/06/13 PHP

PHP开发中常见的安全问题详解和解决方法（如Sql注入、CSRF、Xss、CC等）

2014/04/21 PHP

PHP实现求解最长公共子串问题的方法

2017/11/17 PHP

php中输出json对象的值(实现方法)

2018/03/07 PHP

Laravel 数据库加密及数据库表前缀配置方法

2019/10/10 PHP

php实现断点续传大文件示例代码

2020/06/19 PHP

经典的解除许多网站无法复制文字的绝招

2006/12/31 Javascript

javascript下对于事件、事件流、事件触发的顺序随便说说

2010/07/17 Javascript

JS 表单验证大全

2011/11/23 Javascript

JS+CSS实现实用的单击输入框弹出选择框的方法

2015/02/28 Javascript

基于bootstrap3和jquery的分页插件

2015/07/31 Javascript

Underscore源码分析

2015/12/30 Javascript

Bootstrap前端开发案例一

2016/06/17 Javascript

JS简单实现tab切换效果的多窗口显示功能

2016/09/07 Javascript

AngularJS基于ui-route实现深层路由的方法【路由嵌套】

2016/12/14 Javascript

jQuery ajax动态生成table功能示例

2017/06/14 jQuery

微信小程序实现YDUI的ScrollTab组件

2018/02/02 Javascript

React BootStrap用户体验框架快速上手

2018/03/06 Javascript

javascript单张多张图无缝滚动实例代码

2020/05/10 Javascript

[58:35]OG vs EG 2019国际邀请赛淘汰赛胜者组 BO3 第二场 8.22

2019/09/05 DOTA

Python中用于返回绝对值的abs()方法

2015/05/14 Python

python类中super()和__init__()的区别

2016/10/18 Python

详谈pandas中agg函数和apply函数的区别

2018/04/20 Python

python使用建议与技巧分享（一）

2020/08/17 Python

如何在网站上添加谷歌定位信息

2016/04/16 HTML / CSS

Canvas与Image互相转换示例代码

2013/08/09 HTML / CSS

英国伦敦的睡衣品牌：Asceno

2019/10/06 全球购物

实践论读书笔记

2015/06/29 职场文书

2015大一新生军训感言

2015/08/01 职场文书

2016大一新生军训心得体会

2016/01/11 职场文书

golang json数组拼接的实例

2021/04/28 Golang

Golang日志包的使用

2022/04/20 Golang

Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换

2022/04/24 Python