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>  

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