CSS：具有负半径的边框 [英] CSS: borders with negative radius

问题描述

我有一个问题，我第一次遇到的边界。

所以，我需要创建类似的边界，没有任何图像（如果可能）

页面底部相同

正如你所看到的，有两个边界为负（？）border-radius。我知道负的 border-radius 将无法工作，所以如果有人可以帮助我解决方案，我非常感谢。

我已尝试过此操作：

I have a question I met for the first time about the borders.

So, I need to create similar borders without any images (if it is possible):

The same at the bottom of the page

As you can see, there are two borders with negative (?) border-radius. I know that negative border-radius won't work, so I would highly appreciate if someone could help me with solution.

I already tried this: The first example, but the problem is that I am not able to create normal borders - the whole block only.

解决方案

You can check out this jQuery plugin: http://jquery.malsup.com/corner/ Which has lots of other possibilities for border styling as well.

You can also check out a solution provided by Lea Verou. She uses negative border radius with css3 gradients: http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

这篇关于CSS：具有负半径的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！