首页 文章

CSS嵌入带有实线边框的边框半径

提问于
浏览 次
0

我知道我可以使用径向渐变创建插入/倒置边框，如下所示：Inset border-radius with CSS3，但我想知道的是，如果我可以在生成的形状周围绘制1px的实线边框，如下图所示：

enter image description here

我不仅希望左下半径也被边框反转，并且剩余空间内的背景颜色必须是透明的 . 是否可以使用CSS3和HTML（我现在对canvas或SVG不感兴趣）？

html css3 css-shapes insets

2 回答

  • 4

    演示：

    http://jsfiddle.net/j8gUA/1/

    标记：

    <figure></figure>

    enter image description here

    风格：

    figure{
    position:relative;
    width:200px;
    height:120px;
    margin:100px auto;
    overflow:hidden;
    border:1px solid black;
    border-right:none;
    border-bottom:none;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
figure:before,figure:after{
    content: '';
    position: absolute;  
}
figure:before{
    right: -50%;
    top: 0;
    background: transparent;
    width: 172px;
    height: 200px;
    border: 1px solid black;
    border-radius: 100%;
    box-shadow: 0 0 0 100em red;
}
figure:after{
    left: -1px;
    bottom: 0px;
    height: 16px;
    width: 128px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 5px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;    
}
    回复于
  • 0

    根据我的经验，虽然使用CSS创建一些复杂的形状（http://css-tricks.com/examples/ShapesOfCSS/）是非常可行和值得的，但是一旦需要边框，就应该放弃这种方法并使用图像 . 你当然可以使用它下面的z-index形状的克隆，两个像素更宽，两个像素更高，一个像素在它上面，一个像素在左边，以及所需的边框颜色 . 不幸的是，总会有一些小的跨浏览器问题，尤其是四舍五入 . 它永远不会真的很正确 .

    回复于

相关问题