最外面的矩形框，是table row里任意一個元素被focus之后，觸發整個cx-table :focus-within的選擇器后生成的效果：

中間的一條豎線，是a標簽 focus后的效果；
button標簽focus之后，產生一個小的矩形框；

注意cx-table:focus-within的outline-offset -2px是必須的：

否則最后整個table row的focus-within的border，就是下圖上下兩根線，會超出table border灰線，看起來很ugly.

如果直接在Chrome開發者工具里選中標簽頁，然后在Styles里手動勾上:focus-within，此時效果如下：

關于a標簽頁的focus border，我還有一些有趣的發現。

下列這兩個property去掉后，又能看到a的focus border了：

• width: 100%;
• min-height: 74px;

加上之后，又變成只有最左邊有focus border了：

SAP Spartacus這個自適應的table，如果屏幕尺寸過窄，則只會顯示name這一列：

在這種窄屏的顯示風格下，此時a標簽的focus border就正常了：

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP Spartacus org unit页面的三种focus border及细节讨论的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。