【CSS】outline

説明

outline位在border外面

.box
.box
 width: 300px
 height: 200px
 background-color: mistyrose
 border: 2px solid hotpink
 outline: 1px solid red

Display

.

FireFox的outline bug

如果裡面的東西超出box的話,outline也會被撐開
※其他瀏覽器不會有這個問題

.box
 .inner
.box
 width: 300px
 height: 200px
 background-color: mistyrose
 border: 2px solid hotpink
 outline: 1px solid red

.inner
 background-color: moccasin
 height: 300px
 width: 100px 

Display

解決方法

改用box-shadow做出outline的效果

.box
 .inner
.box
 width: 300px
 height: 200px
 background-color: mistyrose
 border: 2px solid hotpink
 // outline: 1px solid red
 box-shadow: 0 0 0 1px red
 
.inner
 background-color: moccasin
 height: 300px
 width: 100px

Display

.