html - 如何在图像上制作 CSS 边框?

标签 html image css border

<分区>

如何裁剪图像 (600х450) 并使用 CSS 在其上创建边框?

Original Image

进入

Expected output

这可能吗?用什么比较好?创建一些带有 border-radius 的包装器元素?

最佳答案

我认为这是你可以用 css 做的最好的事情:

CSS:

img {
    width:400px;
    height:400px;
    border-top-left-radius:50% 50px;
    border-top-right-radius:50% 50px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

http://jsfiddle.net/andyfurniss/rmc4nuu7/

然后只需添加一个白色边框和一个 box-shadow

关于html - 如何在图像上制作 CSS 边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32909212/

相关文章:

javascript - 避免在列表中填充

image - 为什么我需要图像占位符服务或库?

java - 无法将图像加载到 JPanel 中?

html - 在自动填充容器中居中网格元素

css - react , flex 盒子 : I want my div to transitionally rise from the bottom of a flex container

html - 我在网站的左侧和底部得到空白

HTML 行样式,第 n 个子元素

html - SVG 缩放并保持其相对于 div 的位置

javascript - 我可以同时使用 onclick 和 onsubmit 事件吗?

image - jpeg 压缩会影响使用卷积神经网络的训练和分类吗