在CSS中反转圆角？ [英] Invert rounded corner in CSS?

问题描述

我有一个css代码：

-moz-border-radius-topleft:50px;

我得到结果：

img src =https://i.stack.imgur.com/tbOa9.jpgalt =rounded corner>

是否有任何可能性：

推荐答案

只是为了更新这个，你似乎可以有多种方式。

Just to update this, it seems you can in multiple ways.

Lea Verou发布了一个解决方案

这里是我使用border-image

html

<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>

css

div {
    width: 200px;           
    border-width: 55px;
    -moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    -webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    -o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    margin: 50px auto;   
}

---

h2>

Lea Verou的解决方案

html

<div class="inner-round"></div>

css

.inner-round {
    background-image:
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}

这篇关于在CSS中反转圆角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！