html – 使用CSS自定义圆形图像

概述我想获得一个自定义形状的图像,如下所示： #oval-shape { width: 200px; height: 100px; background: blue; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px;} <img 我想获得一个自定义形状的图像,如下所示：

#oval-shape {  wIDth: 200px;  height: 100px;  background: blue;  -moz-border-radius: 100px / 50px;  -webkit-border-radius: 100px / 50px;  border-radius: 100px / 50px;}

<img ID="oval-shape" src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg">

DEMO

有什么想法,如果这是可能的？

解决方法 有一种方法可以用边框“伪造”这个形状：

body {  background: purple;}#oval-shape {  display:block;  margin: 20px auto;  wIDth: 200px;  height: 200px;  background: none;  border-radius: 100%;  Box-sizing: border-Box;  border-bottom: 50px solID transparent;}

<img src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg" ID="oval-shape">

总结

以上是内存溢出为你收集整理的html – 使用CSS自定义圆形图像全部内容，希望文章能够帮你解决html – 使用CSS自定义圆形图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。