day16_list-style-image

2018 iT 邦幫忙鐵人賽

DAY 16

Modern Web

挑戰 CSS 30 天系列第 16 篇

2018鐵人賽 css

小斑

2017-12-19 17:43:17

1678 瀏覽

list-style-image 屬性是用來將某個圖案設定為記號。此屬性的用法為，
list-style-image:url([image_url]);

如以下範例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS list-style-image</title>
  <meta charset="utf-8">
  <style type="text/css">
	ul{ 
	  list-style-image:url("circles.gif"); 
	}
  </style>
</head>
<body>
    <ul> 
	  <li>使用自我設定的記號。 
	  <li>使用自我設定的記號。 
	</ul>
</body>
</html>

成果如下圖：

因為我的圖片有點大，加上上一篇文章有提到 list-style-position 屬性預定值為 "outside"，因此猜測為導致記號被切掉的原因。
以下為解決方式：

list-style-style、list-style-position、及 list-style-image 屬性可以被簡化為一個 list-style 屬性。這種做法稱為捷徑 (shortcut)。在這裡，屬性的順序並不重要。

如以下範例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS list-style-image</title>
  <meta charset="utf-8">
  <style type="text/css">
	ul{ 
	   list-style: url("circles.gif") none inside; 
	}
  </style>
</head>
<body>
    <ul> 
	  <li>使用自我設定的記號。 
	  <li>使用自我設定的記號。 
	</ul>
</body>
</html>

成果如下圖：