基礎練習
Working on the Recommended Plan
使用 box-shadow 屬性可為元素外框添增陰影。
box-shadow 使用範例
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
MDN 官方文件
Styling the Badge with "border-radius"
使用 border-radius 屬性可為元素套用圓角外框。
border-radius 使用範例
/* Radius is set for all 4 sides */
border-radius: 10px;
/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;
/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;
/* 更多範例見 MDN 官方文件 */
MDN 官方文件
Styling our List
使用 list-style 屬性可調整無序表單的設定。
list-style 使用範例
/* type */
list-style: square;
/* image */
list-style: url("../img/shape.png");
/* position */
list-style: inside;
/* Keyword value */
list-style: none;
/* 更多範例見 MDN 官方文件 */
MDN 官方文件
Improving our Action Button
使用 cursor 屬性可設定滑鼠游標在元素上方時的外觀。
cursor 使用範例
/* Keyword value */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;
/* 更多範例見 MDN 官方文件 */