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