Question

我正在为我们的大院建立一个项目网站，现在我正在为登陆页面建立一个新闻提要。

早些时候，新闻馈送盒（分为三个盒子/行）只是真正的文字;现在它涉及文本和图像。之前，我可以简单地使用CSS渐变来创建所请求的效果。问题在于，我似乎无法使其与图像背景一起正常工作。

我尝试使用图像边框解决问题，但由于它需要透明，因此它与身体背景相匹配但仍覆盖图像背景，因此无法正常工作。

我的问题如下：我是否可以在新闻供稿框上创建所需的倒角效果，这些效果永远不会 - 关于身体的背景或图像/真实文本是什么？

请查看jsfiddle以了解第一个纯文本框具有什么效果以及我想用第二个图像/文本框做什么; http://jsfiddle.net/pm6hqtxq/1/

倒角代码：

background:linear-gradient(135deg, transparent 20px, #333333 0) top left, linear-gradient(0deg, transparent 0px, #333333 0) top right, linear-gradient(0deg, transparent 0px, #333333 0) bottom right, linear-gradient(0deg, transparent 0px, #333333 0) bottom left;

谢谢，托米

Answer 1

这是css的方法。

Fiddle HERE

    background: #c00; /* fallback */
    background:
        -moz-linear-gradient(45deg,  transparent 15px, #c00 10px),
        -moz-linear-gradient(135deg, transparent 15px, #c00 10px),
        -moz-linear-gradient(225deg, transparent 15px, #c00 10px),
        -moz-linear-gradient(315deg, transparent 15px, #c00 10px);
    background:
        -o-linear-gradient(45deg,  transparent 15px, #c00 10px),
        -o-linear-gradient(135deg, transparent 15px, #c00 10px),
        -o-linear-gradient(225deg, transparent 15px, #c00 10px),
        -o-linear-gradient(315deg, transparent 15px, #c00 10px);
    background:
        -webkit-linear-gradient(45deg,  transparent 15px, #c00 10px),
        -webkit-linear-gradient(135deg, transparent 15px, #c00 10px),
        -webkit-linear-gradient(225deg, transparent 15px, #c00 10px),
        -webkit-linear-gradient(315deg, transparent 15px, #c00 10px);
}

使用CSS3将倒角添加到框中

1 个答案: