css3之outline屬性

在看css3相關文章時候，看到一個用css樣式實現一個「+」加號效果

#這裡面接觸到一個新的css3屬性，outline，翻譯成中文就是－－"輪廓";

語法：outline:outlineWidth outlineStyle outlineColor;

例如：outline:5px solid blue;

而且據我測試，這裡的5px ，solid，blue可以隨意調換位置，不影響顯示效果；

 

#而且這個屬性不屬於盒模型的一部分，所以不佔據空間，在使用的時候，不需要去計算寬度，高度等值

瀏覽器的支援情況也較好：ie8+，還有其他主流瀏覽器都支援。火狐甚至還支援outline-radius，和border-radius

#是一個道理。

從」+「號這個範例上面來看

<p>第一个方法是使用outline－offset的向内偏移结合border实现的，不兼容所有IE，safari上也有点问题，要用chrome查看才行</p>
<p class="use-outline-offset"></p>


<style>
.use-outline-offset{
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  height: 200px;
  border:40px solid #000000;
  background-color:#cccccc;
  outline-width:40px;
  outline-style:dotted;
  outline-offset:-80px;
  box-sizing: border-box;
}
</style>

裡面也提到了一個屬性：outline-offset，也就是輪廓偏移，這裡支持負值。這讓我聯想到了AI中的路徑，以及偏移路徑。負值就是向內偏移。所以實現了”+”號效果；

outline-offset屬性所以主流瀏覽器都支持，除了IE（經過測試，確實不支持）。

但是這個屬性不佔用空間的特性非常好，可以提高工作效率，並且結合outline-offset可以實現一些意想不到的效果；

以上是css3之outline屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！