-7

在此处输入图像描述

大家好,我需要用css做这样的框架。我有 8 张图像(4 个顶角和底角以及 4 个将重复的图像)。这个框架应该是可调整大小的,所以我可以使用 javascript 将其调整为屏幕尺寸。

问题是我不知道该怎么做。我试图用谷歌搜索教程,但失败了。

有人可以为我指出一个深入研究的方向吗?所以我有一个开始的地方。一些教程或示例人们如何做到这一点)将不胜感激,谢谢)

附言

我知道如何调整图像大小。我不知道如何组合div's来获得像绿色这样的标题。中间有两个角和可调整大小的元素。

4

3 回答 3

1

您可以使用 css3 轻松做到这一点......您应该使用border-radiusbox-shadowcss 属性

阅读:http ://www.css3.info/preview/rounded-border/和http://www.css3.info/preview/box-shadow/

于 2013-02-18T13:04:31.553 回答
1

除了标题背景,您不需要任何其他图像。您可以将 div 用作具有图像背景和 100% 宽度的标题,另一个 div 作为具有背景和边框以及填充/边距的外部“正方形”,然后使用具有白色背景和边框半径的 div(http://www.w3schools.com /cssref/css3_pr_border-radius.asp)。(您也可以使用 css3 从标题背景进行渐变,但尚未被浏览器很好地采用)。

于 2013-02-18T13:13:08.713 回答
1

我做了一个简单的jsFiddle,我希望它会有所帮助。我只使用border-radius了 from css3 选择器。您可以使用渐变来实现标题中的渐变效果。

于 2013-02-18T13:22:28.093 回答