CSS3制做圆角照片和椭圆型照片

日期：2021-03-03 类型：科技新闻 

关键词：小程序 活动，微信小程序demo，微信小程序游戏开发价格，手机小程序怎么做，视频播放微信小程序

本文案例为大伙儿共享了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>  

  

 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>  

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：梁平网站商城系统搭建—小程序悬浮窗 返回下一篇：没有了