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

一叶轮回

于 2016-09-14 16:49:31 发布

阅读量1.7k

点赞数 1

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>  
 
 

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>  
 
 