-1

圆角图像

你好,

谁能帮我在css3中创建下面提到的设计。我已经尝试了以下属性,但仍然无法获得确切的设计

background:#c6d92d;
height: 5em;
width: 20em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 5em 5em 1em 1em;
padding:20px;

谢谢

4

2 回答 2

3

您需要多个 div 才能实现这一目标。

您必须在黑色背景上放置两个其他 div(一个在左侧,一个在右侧),半径为白色。

这是我在我的网站上实现的效果:http: //dystroy.org/re7210/(单击“Toutes les recettes”)。

你这样做:

        _________
       /         \
div C |  div A    |  div B
     /            \

C 和 B 是白色 div,覆盖 100% 具有黑色背景的单元格(仅在边界半径不为 0 的情况下可见)。

在这种情况下,主要右侧的 div 具有以下 css :

#divB {
background-color: white;
border-radius: 0 0 0 10px;
}

这是我的最终效果:

在此处输入图像描述

这是我的“divB”,它应该清楚地表明我在哪里有白色在黑色上,在哪里有黑色在白色上:

在此处输入图像描述

(如您所见,我发现使用表格更容易编写所有这些,但您可能可以不使用表格来完成)

于 2012-05-24T13:49:37.560 回答
1

您正在寻找的属性是: border-top-left-radiusborder-top-right-radius
http://www.css3.info/preview/rounded-border/

于 2012-05-24T13:52:10.487 回答