大家好,我需要用css做这样的框架。我有 8 张图像(4 个顶角和底角以及 4 个将重复的图像)。这个框架应该是可调整大小的,所以我可以使用 javascript 将其调整为屏幕尺寸。
问题是我不知道该怎么做。我试图用谷歌搜索教程,但失败了。
有人可以为我指出一个深入研究的方向吗?所以我有一个开始的地方。一些教程或示例人们如何做到这一点)将不胜感激,谢谢)
附言
我知道如何调整图像大小。我不知道如何组合div's
来获得像绿色这样的标题。中间有两个角和可调整大小的元素。
您可以使用 css3 轻松做到这一点......您应该使用border-radius
和box-shadow
css 属性
阅读:http ://www.css3.info/preview/rounded-border/和http://www.css3.info/preview/box-shadow/
除了标题背景,您不需要任何其他图像。您可以将 div 用作具有图像背景和 100% 宽度的标题,另一个 div 作为具有背景和边框以及填充/边距的外部“正方形”,然后使用具有白色背景和边框半径的 div(http://www.w3schools.com /cssref/css3_pr_border-radius.asp)。(您也可以使用 css3 从标题背景进行渐变,但尚未被浏览器很好地采用)。
我做了一个简单的jsFiddle,我希望它会有所帮助。我只使用border-radius
了 from css3 选择器。您可以使用渐变来实现标题中的渐变效果。