iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
2

之前在CodePen上面有看見許多使用CSS製作圖案的Pen
當時看到覺得很神奇也很佩服,沒想到可以使用CSS做到這樣的事情

用CSS進行製作時,我們會需要使用到
position、border-radius、outline

方形由div本身的寬跟高去製作
圓形是使用border-radius

定位 position

static //預設
relative //相對定位
absolute //絕對定位
fiexd //固定定位

圓角 border-radius

可以只設定一個值讓四個角同時套用
也可以寫在一起,寫在一起後數值定位順序為順時針
第一個數字是左上、第二個數字是右上、第三個數字是右下、第四個數字是左下。

border-radius: 5px;
border-radius: 5px 5px 5px 5px;

也可以對單一個角做設定

border-top-left-radius: 5px; //左上角
border-top-right-radius: 5px; //右上角
border-bottom-right-radius: 5px; //右下角
border-bottom-left-radius: 5px; //左下角

只要使用上面這些屬性就可以畫出一些簡單可愛的小東西囉!
codepen - CSS繪圖簡易小車車
codepen - CSS繪圖雲朵


上一篇
Day04::Bootstrap學習心得
下一篇
Day06::我所知道的 CSS設計模式和架構之OOCSS
系列文
三十哩路,我的前端學習路程30

尚未有邦友留言

立即登入留言