使用CSS为页面内容构建框架

Question

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

问题是我不知道该怎么做。我试图谷歌的教程，但失败了。

有人能指出我的方向吗？ 所以我有一个开始的地方。一些教程或示例人们如何做到这一点） 非常感谢，谢谢）

P.S。

我知道如何调整图片大小。 我不知道如何将div's组合成绿色标题。 在中间有两个角和可调整元素。

Answer 1

您可以使用css3轻松完成此操作...您应该使用border-radius和box-shadow css属性

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

Answer 2

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

Answer 3

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