我有一个CSS代码:
-moz-border-radius-topleft:50px;
我得到了以下结果:
是否有可能像这样呈现:
我有一个CSS代码:
-moz-border-radius-topleft:50px;
我得到了以下结果:
是否有可能像这样呈现:
在现代浏览器中,您可以使用mask-image
:
#aux-container {
width: 100px;
height: 100px;
background: #f00;
-webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}
<div id="aux-container"></div>
此外,可以查看http://www.html5rocks.com/en/tutorials/masking/adobe/,该网址描述了如何使用mask-box-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;
}
HTML
<div class="inner-round"></div>
css
:CSS(层叠样式表)是一种用于描述网页内容展示方式的语言,它可以控制HTML元素的外观、布局和其他方面的样式。.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);
}
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 10">
<path d="M9 1 V9 H1 V3 Q3 3 3 1" fill="#fff"/>
</svg>
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 6.7">
<defs>
<clipPath id="clip">
<path d="M9 1 V6.7 H1 V3 Q3 3 3 1" fill="#fff"/>
</clipPath>
</defs>
<image xlink:href="http://i.imgur.com/qi5FGET.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>
这可以通过使用径向渐变来完成。
div {
width: 20vw;
height: 20vw;
background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
}
<div></div>
仅供娱乐,可以通过定义多个背景图像(每个角一个)来添加额外的倒角:
div {
width: 40vw;
height: 40vw;
position: relative;
background-color: darkblue;
--circle: radial-gradient(circle,white 8vw, darkblue 8.1vw);
}
div:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: var(--circle), var(--circle), var(--circle), var(--circle);
background-size: 18vw 18vw;
background-position: -40% -40%, 140% -40%, -40% 140%, 140% 140%;
background-repeat: no-repeat;
}
<div></div>
更新: 现在有很多可选方案。请查看其他答案之一。
原始答案:
不幸的是,目前没有基于官方或实现CSS规范的解决方案:(
然而,正如其他人所添加的那样,你可以使用JS库或复杂的HTML/CSS实现可能的解决方案(或作弊?)来实现相同的效果。我遇到了这个问题,正在寻找一种方法来制作比OP更复杂的角落而不使用图片。
我已经在webkit网站上提交了一个错误(功能请求)-因为似乎还没有提交过一个。
div {
margin:2em; /* keep it away from sides to see result */
padding:2em;/* for test to size it when empty */
position:relative; /* reference to set pseudo element where you wish */
overflow:hidden;/* you do not want the box-shadow all over the page */
}
div:before {
content:'';
position:absolute;
width:80px;
height:80px;
top:-40px;
left:-40px;
border-radius:100%;
box-shadow:0 0 0 2000px #1D005D;/* here draw the shadow inside its parent , maybe z-index will be required for content */
}
伪元素可以采取任何形状,并通过CSS进行变换,可以在其元素的任意位置设置,以绘制类似于孔洞的效果。例如: http://codepen.io/gc-nomade/pen/nKAka
.one {
--mask: radial-gradient(40px at 40px 40px,#0000 98%,#000) -40px -40px;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.two {
--mask:
radial-gradient(40px at 0 0,#0000 98%,#000) 0/51% 100% no-repeat,
radial-gradient(40px at 100% 100%,#0000 98%,#000) 100%/51% 100% no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.three {
--mask:
radial-gradient(60px at 60px 60px,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000) -60px -60px,
linear-gradient(90deg,#000 20px,#0000 0) -10px 50% /100% calc(100% - 120px + 10px) repeat-x,
linear-gradient( #000 20px,#0000 0) 50% -10px/calc(100% - 120px + 10px) 100% repeat-y;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.four {
--mask: radial-gradient(60px at 0 0,#0000 98%,#000);
-webkit-mask: var(--mask);
mask: var(--mask);
}
.five {
--mask:
radial-gradient(60px at 100% 0,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000),
conic-gradient(from 90deg at 10px 10px,#0000 25%,#000 0) 0 0/calc(100% - 60px + 10px) 100% repeat-y,
conic-gradient(at bottom 10px right 10px,#000 75%,#0000 0) 0 100%/100% calc(100% - 60px + 10px) repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.box {
width: 150px;
aspect-ratio:1;
display:inline-block;
background:linear-gradient(red,blue);
}
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
有几种方法可以通过仅使用CSS来解决此问题 - 但这将取决于您的背景颜色(如果是纯色,则更容易),如果您的背景具有图案,则可能会稍微复杂一些。
我在这里介绍了一个基本示例,说明如何制作CSS中的反向边界半径(此处)。 这使用了一个关于边框大小的技巧来使用内部,您可能需要进行一些定位才能使其正常工作,但是正如您所看到的那样,这是可能的。特别是如果您为每个指定background-color
。
如果您想要所有4个角落,您将不得不为您的div中的每个添加单独的类,并且每个类都将模拟一个角落,例如左上角,右上角等。
实际上有一种方法,像这样:
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>
但正如@Domenic所说,你需要扎实的背景知识,否则你会得到这样的结果:
<div style=" background-color:#666">
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>
不行。
如果你有扎实的基础,你可能可以使用CSS创建这个小三角。
否则,除了使用PNG,就没有什么特别的方法了,就像你在使用border-radius
之前创建圆角一样。