https://tutorial.jumpdesign.tw/web_tutorial.html

📌【圓角 border-radius】

CSS3 border-radius屬性可以被用來創建圓角。

在CSS2中要建立圓角是很困難的。需要建立背景圖片、切片或Javascript,才能做到。但在CSS3中輕易就可以做到。

📍 數值說明:

border-radius: 四角; //一個值

border-radius: 左上 右下 右上 左下; //二個值

border-radius: 左上 右上左下 右下; //三個值

border-radius: 左上右上 右下左下: //四個值

📍 各種組合數值:

border-top-right-radius: 右上

border-bottom-right-radius: 右卜;

border-top-left-radius: 左上;

border-bottom-left-radius: 左卜;

#box1 {
	border-radius:25px;
}
#box2 {
	border-radius:24px 16px 24px;
}
#box3 {
	border-top-left-radius:24px;
}

🖥️  延伸閱讀：

w3schools-border-radius Property: https://www.w3schools.com/cssref/css3_pr_border-radius.php

📌【透明度 opacity】

CSS3 opacity屬性可以被用來製造出半透明效果:

值: 0 ~ 1 ;

1 = 100%

0.1 = 10%

<aside> 💡

套用於父層時,子元素全部都會套用 半透明。

</aside>

#box1 {
	opacity: 0.5; // 為50%
}
#box2 {
	opacity: .3; // 數字 0 可省略
}

🖥️  延伸閱讀

w3schools-opacity Property: https://www.w3schools.com/cssref/css3_pr_opacity.php

📌【多欄 column-count】

多欄column-count 屬性，可以被用來製作出多欄排版效果。

column-count: number | auto | initial | inherit;

📍 相關屬性:

欄距column-gap 屬性，可以被用來製作出多欄排版間距。

column-gap: length | normal | initial | inherit;

.newspaper {
	column-count: 3;
	column-gap: 40px;
}

🖥️  延伸閱讀：

w3schools-column-count Property: https://www.w3schools.com/cssref/css3_pr_column-count.php

w3schools-column-gap Property: https://www.w3schools.com/cssref/css3_pr_column-gap.php

📌【區塊陰影 box-shadow】

CSS3 box-shadow 屬性，可以被用來製造容器的陰影效果。

📍 外陰影: box-shadow: h-offset(x軸) v-offset(y軸) blur(模糊) spread(展開[選填]) color(顏色);

📍 內陰影: box-shadow: inset ×軸 y軸 模糊 展開(選填) 顏色;

📍 多個值: box-shadow: x軸 y軸 模糊 展開(選填) 顏色 , inset ×軸 y軸 模糊 展開(選填) 顏色;

#box1 {
	box-shadow: 10px 10px 5px 2px #888;
}

#box2 {
	box-shadow: inset -1px -1px 5px 2px #888;
}

#box3 {
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15), 
	inset -1px -1px 1px rgba(255, 255, 255, 0.3);
}