圓角邊框

使用border-radius圓角邊框樣式，可以修改盒子邊框變成圓角

語法:

border-radius:length;

//四邊屬性設置同樣
border-radius: 10px;

//簡寫屬性，順序為 左上 右上 右下 左下 (順時鐘)
border-radius: 15px 12px 10px 5px;

//分開寫
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;

• 參數值可以為數值或百分比的形式
• 參數設置成正方形數值的一半或50%可成圓形
• 設置為高度的一半可成為矩形
• 該屬性也可當簡寫屬性 跟四個值

border-radius - - - codepen

盒子陰影

使用box-shadow屬性為盒子添加陰影

語法:

box-shadow:h-shadow v-shadow blur spread color inset;
/* 
h-shadow 必須，水平陰影的位置 (可以為負值)
v-shadow 必須，垂直陰影的位置 (可以為負值)
blur     可選，模糊距離
spread   可選，陰影的尺寸
color    可選，陰影的顏色
inset    可選，將外部陰影改為內部陰影
*/
box-shadow: 10px 10px 10px 10px black; /*(經常使用的範例)*/
box-shadow: 10px 10px;

備註:

1. 默認的是外陰影(outset) 但是不可使用這個參數 否則將無效
2. 盒子陰影不佔用空間，不會影響其他盒子排列

文字陰影

text-shadow 將文字添加陰影

語法:

text-shadow: h-shadow v-shadow blur color;
text-shadow: 2px 2px 5px black;
/* 
h-shadow 必須，水平陰影的位置 (可以為負值)
v-shadow 必須，垂直陰影的位置 (可以為負值)
blur     可選，模糊距離
color    可選，陰影的顏色
*/

box&text-shadow - - - codepen