ヘアライン / ボーダー

すべてのヘアライン（細いボーダー）は、通常のCSSボーダーの代わりに、:afterと:beforeの疑似要素で作られています。この方法により、0.5px（iOS Retina用）や0.33px（iPhone X/Plus用）のヘアラインを実現できます。

ルールは簡単です。

• "bottom" and "right" hairlines are made using :after pseudo elements
• "left" and "top" hairlines are made using :before pseudo elements

そのため、例えば navbar の下側のヘアラインの色を変更したい場合には、その .navbar-bg:after 要素の background-color を変更する必要があります。

.navbar-bg:after {
  background-color: #ff0000;
}

ナビバーの下のヘアラインとツールバーの上のヘアラインを消すには

.navbar-bg:after {
  display:none;
}

.toolbar:before {
  display:none;
}

no-hairline クラス

このヘルパークラスはヘアラインを除去するために使用することができます。現在のところ、ナビバー、ツールバー、サブナビバー、サーチバー、カードとその要素(カードのヘッダー、フッター)でサポートされています。

To remove hairline from navbar:

<div class="navbar no-hairline">
    ...
</div>

no-hairlines クラス

• no-hairlines クラスは、リストビューとコンテンツブロックで、外側のヘアラインを除去します。
• no-hairlines-md は同じことをしますが、MDテーマの場合のみです。
• no-hairlines-ios は同じことをしますが、iOS テーマの場合にのみ適用されます。
• no-hairlines-aurora は同じですが、Aurora テーマにのみ適用されます。
• no-hairlines-between クラスは、リストビューでリストアイテム間のヘアラインを取り除きます。
• no-hairlines-between-md も同様ですが、MDテーマの場合にのみ使用されます。
• no-hairlines-between-ios は同じことをしますが、iOS テーマの場合に限ります。
• no-hairlines-between-aurora は同じことをしますが、Aurora テーマにのみ適用されます。

<!-- 外側のヘアラインを取り除く -->
<div class="list no-hairlines">
  ...
</div>

<!-- アイテム間のヘアラインを削除 -->
<div class="list no-hairlines-between">
  ...
</div>

<!-- MDテーマの場合のみ、アイテム間のヘアラインを削除します。 -->
<div class="list no-hairlines-between-md">
  ...
</div>

ヘアラインのCSS変数

ヘアラインやボーダーの色に利用できるCSS変数がある場合、削除ではなく透明にすることができます。例えば、リストアイテムのヘアラインを削除する（透明にする）には、次のように指定します。

:root {
  --f7-list-item-border-color: transparent;
}