麥克斯與沃普雷司

css border radius 如何為圖片作式樣設計

css border radius

如何為圖片作式樣設計

css border radius

在替換了 WodPress 佈景主題以後,發現圖片因為跟背景顏色太過於接近,造成文章閱讀上沒有辦法呈現十分清楚,所以開啟了想幫圖片作式樣修改的念頭。很高興拜網路所賜,很多學習的資源網路上都可以找的到。例如這次要推薦給大家的網站 W3Schools,就擁有非常多的線上資源,像是HTML and CSS,JavaScript,HTML Graphics…等等。這次是要為圖片作式樣修改增加外框線,因此利用網站上的 CSS Tutorial作式樣修改與預覽,成功達到需要的效果以後,再轉移到自己安裝WordPress 的網誌上使用。如果對其他式樣的學習有興趣,網站上還有很多很多的示範可以學習參考。

接下來就分享 max 幫圖片作式樣修改的過程 css border radius,也就是幫圖片增加一個外框線,有興趣的朋友可以試看看。

1. 請連結到W3Schools 網站,點選右上角的搜尋,以這次的範例作說明,輸入border radius(圖一)。

(圖一)搜尋 border radius

 

2. 跳出一個搜尋結果的視窗,這裡我們選擇 CSS3 border-radius Property(圖二)。

(圖二)CSS3 border-radius Property

 

3. 進到CSS3 border-radius Property 頁面,可以看到式樣範例區塊(圖三),網頁往下還可以看到式樣語法的瀏覽器支援程度(圖四)。

(圖三)式樣範例區塊

 

(圖四)瀏覽器支援程度

 

4. 接著點選(圖三)所示的Try it yourself »,進到式樣可以自行設計的網頁,設計後呈現的變化效果,點選網頁上方中間位置的See Result »按鈕,就可以在網頁的右側即時看見效果(圖五)。可以反覆修正語法直到符合自己的需求,然後請將語法記下,回到WordPress 編輯文章圖片式樣時會用到。

(圖五)設計式樣語法

 

5. 在編輯文章圖片式樣前,先使用文字編輯軟體開啟子佈景主題的式樣檔style.css檔案,填入如下的語法:

6. 再回到文章編輯的頁面,將編輯模式切換到文字模式,對圖片式樣作編輯(圖六)。

(圖六)編輯圖片式樣

 

7. 以上完成,文章發表後可以看到圖片多了灰色的外框線(圖七)。

(圖七)圖片外框線完成

 

8. W3Schools上還有很多的式樣效果,有興趣的朋友可以好好的研究一下,相信一定會有很多的收穫的。

Exit mobile version