iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 14
0
Modern Web

菜鳥前端奮鬥史(欸?系列 第 14

Day14 「CSS3 讓畫面更精彩」 ─ 圓角、陰影、漸層效果

  • 分享至 

  • xImage
  •  

今天先填了兩個跨年時留下的坑,晚點來補上分享..


終於想到一個比較不會太偏離前後篇章的主題來分享了! (這個居然花最多時間

今次要來聊聊 CSS3 如何讓畫面更精采

border-radius 圓角效果

我們經常在網頁上看到類似這樣的按鈕
https://ithelp.ithome.com.tw/upload/images/20180112/20107640niCi8cKFjJ.png

欸?可是一般來說 button 的 border 外框不是都四四方方的嗎?

這就是因為使用了 border-radius 圓角效果囉!

在找資料的時候發現了一個很有趣的網站(CSS Border Radius Generator )
可以直接在畫面上調整想要的樣式,同時產出相應的 code

按慣例先上個 demo 方便大家了解

border-radius 的數值可以是 px ,也可以是 %
比較特別的是,50% 的時候,(若寬高等長)就會變成正圓型
https://ithelp.ithome.com.tw/upload/images/20180112/20107640100Kabji8F.png

「使用 border-radius 的時候,也可同時使用 border 讓畫面看起來更豐富」

 
 
border-radius 後方允許填入四個值,依序分別是 「左上」、「右上」、「右下」、「左下」
https://ithelp.ithome.com.tw/upload/images/20180112/20107640QnbPThlFKv.png

兩個值時則分別是 「左上右下」、「右上左下」
https://ithelp.ithome.com.tw/upload/images/20180112/20107640Mq9rCKrpgU.png

當然也是存在三個值的,分別為**「左上」、「右上左下」、「右下」**
https://ithelp.ithome.com.tw/upload/images/20180112/20107640y7B06LeiYh.png


box-shadow 陰影效果

想讓東西看起來比較立體不單調?上點陰影吧!

直接來點畫面演示會比較容易懂,本次 demo 在此

box-shadow 內一般常見到是有四種屬性值可設定,分別是 「X軸寬度」、「Y軸寬度」、「柔焦程度」、「陰影顏色」
在寬度跟柔焦程度部分要注意的是只有 px 這個值可以用
https://ithelp.ithome.com.tw/upload/images/20180112/20107640SDaNa4CoaE.png

「只有X、Y軸寬度」、「X、Y軸寬度,有柔焦」、「X、Y軸不同寬度,有柔焦,變更陰影顏色」

Gradients 漸層效果

之後補上


補充資料


>>隊友任意門<<

我是小菜鳥阿陰,我們下次見!


上一篇
Day13 「之前之後?什麼鬼?」 ─ ::before、::after 偽元素
下一篇
Day15 「給我好好站在那邊」 ─ position 定位屬性
系列文
菜鳥前端奮鬥史(欸?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言