为了账号安全,请及时绑定邮箱和手机立即绑定

使用CSS3插入边框半径

/ 猿问

使用CSS3插入边框半径

慕容3067478 2019-09-26 09:55:47

有没有办法用css3创建插入边界半径?(无图像)

我需要这样的边界半径:


http://img1.sycdn.imooc.com/5d8c1ab60001af4b01100074.jpg

查看完整描述

3 回答

?
qq_花开花谢_0

我认为如果拐角处必须透明是不可能的,但是如果已知背景,则可以在每个拐角处用圆角边框创建一个div。如果为这些div赋予了与页面背景相同的背景色,则效果将起作用。

在这里查看我的示例http://jsfiddle.net/TdDtX/


#box { position: relative; margin: 30px; width: 200px; height: 100px; background: #ccc; border: 1px solid #333; } .corner { position: absolute; height: 10px; width: 10px; border: 1px solid #333; background-color: #fff; } .top-left { top: -1px; left: -1px; border-radius: 0 0 100% 0; border-width: 0 1px 1px 0; } .top-right { top: -1px; left: 190px; border-radius: 0 0 0 100%; border-width: 0 0 1px 1px; } .bottom-left { top: 90px; left: -1px; border-radius: 0 100% 0 0; border-width: 1px 1px 0 0; } .bottom-right { top: 90px; left: 190px; border-radius: 100% 0 0 0; border-width: 1px 0 0 1px; }
<div id="box"> <div class="corner top-left"></div> <div class="corner top-right"></div> <div class="corner bottom-left"></div> <div class="corner bottom-right"></div> </div>


查看完整回答
反对 回复 2019-09-26
?
撒科打诨

我发现用所有CSS和HTML(没有图像等)实现此目的的最佳方法是使用 Lea Verou的CSS3渐变。从她的解决方案:

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;}

最终结果是一组带有曲线的透明渐变。观看完整的JSFiddle演示,并试用它的外观。

显然,这取决于支持rgbagradient,因此应被视为一个渐进增强,或者如果它是必不可少的设计,你应该提供对旧的浏览器(尤其是IE浏览器,不支持基于图像的回退gradient通过IE9甚至达到)。


查看完整回答
反对 回复 2019-09-26
?
慕标5265247

您可以通过将透明的圆形元素绝对定位在带有阴影的角落中来实现。我使用了包含跨度,框阴影,边框和伪选择器的隐藏溢出div的组合。

看看我的例子

这是您需要入门的基本HTML和CSS:


a {display:inline-block; width:250px; height:100px; background:#ccc; border:2px solid #000; position:relative; margin:10px;} a div {position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%;} a div:after {content:''; background:#000; width:2px; height:75px; position:absolute; top:12.5px;} a div:first-of-type {left: -14px;} a div:first-of-type:after {left:0;} a div:last-of-type {right: -14px;} a div:last-of-type:after {right:0;} a span {display:block; width:30px; height:30px; background:transparent; position:absolute; bottom:-20px; right:-20px; border:2px solid #000; border-radius:25px; box-shadow:0 0 0 60px #ccc;} a div:first-of-type span {left:-20px;} a div:first-of-type span:first-child {top:-20px;} a div:first-of-type span:last-child {bottom:-20px;} a div:last-of-type span {right:-20px;} a div:last-of-type span:first-child {top:-20px;} a div:last-of-type span:last-child {bottom:-20px;}
<a href=""> <div> <span></span> <span></span> </div> <div> <span></span> <span></span> </div> </a>


查看完整回答
反对 回复 2019-09-26

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信