close

圖片美化CSS.PNG  

(PS.這不是同一篇文章 XDDDDDD)

當插入圖片時，單單僅是如此感覺很無趣很不好看。

現在可以透過CSS3來設定圓角跟陰影了！

上面的圓角範例如下：

border: 10px solid; (非常重要，一定要設定樣式才看的出效果)

border-radius: 10px;

border-color: #a49dab;

=> border-radius：圓角半徑

 

但如果有設定陰影效果，就不太需要設定樣式才看得出來。

陰影的範例如右：box-shadow: 3px 3px 12px grey;

=> box-shadow：h-shadow(水平陰影) v-shadow(垂直陰影) blur(模糊半徑) spread(擴散半徑) color |inset|initial|inherit;

 

多玩幾次就能知道怎樣是最喜歡的或是說最適合當下的網頁的！

Try It!!

圓角半徑參考網址：

CSS3 圓角 border-radius

CSS3 border-radius Property

 

陰影參考網址：

用 CSS3 box-shadow 設計圖片陰影效果

CSS3 box-shadow Property

 

 

arrow
arrow
    文章標籤
    css html5 css3
    全站熱搜

    applebee.930 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄