iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

從零開始前端學習(HTML、CSS、JavaScript) 系列 第 12

Day 12 CSS <圓角邊框、盒子陰影>

圓角邊框

使用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


上一篇
Day 11 CSS <三大特性>
下一篇
Day 13 CSS <屬性書寫順序 & 網頁布局-標準布局>
系列文
從零開始前端學習(HTML、CSS、JavaScript) 30

尚未有邦友留言

立即登入留言