嗨,大家好,我需要用CSS來做這樣的框架。我有8個圖像(4個頂部和底部的角落和4個圖像將被重複)。 此框架應該可調整大小,所以我可以使用javascript將其調整爲屏幕尺寸。
問題是我不知道該怎麼做。我試圖谷歌教程,但失敗。
有人能指點我的方向嗎? 所以我有一個地方開始。一些教程或例子人們如何做) 將非常感謝,謝謝)
P.S.
我知道如何調整圖像大小。 我不知道如何結合div's
有像綠色標題。 中間有兩個角落和可調整大小的元素。
嗨,大家好,我需要用CSS來做這樣的框架。我有8個圖像(4個頂部和底部的角落和4個圖像將被重複)。 此框架應該可調整大小,所以我可以使用javascript將其調整爲屏幕尺寸。
問題是我不知道該怎麼做。我試圖谷歌教程,但失敗。
有人能指點我的方向嗎? 所以我有一個地方開始。一些教程或例子人們如何做) 將非常感謝,謝謝)
P.S.
我知道如何調整圖像大小。 我不知道如何結合div's
有像綠色標題。 中間有兩個角落和可調整大小的元素。
除了標題背景,你將不再需要任何其他圖像。您可以使用帶圖像背景和100%寬度的標題的div,另一個div用作具有背景和邊框以及填充/邊距的外部「正方形」,然後使用白色背景和邊框半徑的div(http://www.w3schools.com/cssref/css3_pr_border-radius.asp)。 (你也可以通過使用css3從標題背景做漸變,但它尚未被瀏覽器採用)。
您可以輕鬆地做到這一點用CSS3 ...你應該使用border-radius
和box-shadow
CSS屬性
閱讀:http://www.css3.info/preview/rounded-border/和http://www.css3.info/preview/box-shadow/
我做了一個簡單的jsFiddle,我希望這會有所幫助。我只使用css3選擇器中的border-radius
。您可以使用漸變實現標題中的漸變效果。
SO不是一個驅動代碼生成器。請嘗試自己去嘗試一下。有很多教程。 – BenM 2013-02-18 13:05:38
沒有努力,沒有進展。 – jolt 2013-02-18 13:06:46
你嘗試過搜索任何東西嗎? 「CSS漸變」或「CSS圓角」也許? – cimmanon 2013-02-18 13:07:23