CSS3制作圆角图片和椭圆形图片


Posted in HTML / CSS onJuly 08, 2016

本文实例为大家分享了CSS3制作圆角和椭圆形图片的方法,供大家参考,具体内容如下

1、圆角图片

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. img {   
  6.     border-radius: 8px;   
  7. }   
  8. </style>  
  9. </head>  
  10. <body>  
  11. <h2>圆角图片</h2>  
  12. <p>使用 border-radius 属性来创建圆角图片:</p>  
  13. <img src="paris.jpg" alt="Paris" width="400" height="300">  
  14. </body>  
  15. </html>  

  

CSS3制作圆角图片和椭圆形图片

 2、椭圆形图片

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. img {   
  6.     border-radius: 50%;   
  7. }   
  8. </style>  
  9. </head>  
  10. <body>  
  11. <h2>椭圆形图片</h2>  
  12. <p>使用 border-radius 属性来创建椭圆形图片:</p>  
  13. <img src="paris.jpg" alt="Paris" width="400" height="300">  
  14. </body>  
  15. </html>  

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