CSSの境界線を模倣することは可能ですが、カスタムカラーを使用できますか？

StackOverflow https://stackoverflow.com/questions/1816123

  •  08-07-2019
  •  | 
  •  

質問

基本的に「リッジ」を持ちたいスタイルの境界線、ただしカスタムカラーを使用。 border-style：ridge では、異なる色を入れることはできないようです。ブラウザは、指定された色よりも少し明るい色と少し暗い色を使用します。

現在のソリューションはこれですが、余分な＆lt; div＆gt;

があるため理想的ではありません 
<div id="header">
  <!-- block with border-bottom set to `1px solid #2e3436`-->
</div>
<div style="height: 1px; background-color: #fbe995;"></div>

この下の次のアイテムでは、その色に上部の境界線を設定できません（独自のスタイルがあり、独立しています）。そのため、アイデアは出ていません。他に試すことができるものはありますか？

役に立ちましたか？

解決

あなたの例は、要素の周りのうねのある境界線ではなく、ヘッダーと残りの部分の区切りとしてうねのある線を作成することを示唆しているようです。そのために hr を使用しないのはなぜですか。

その後、境界線を設定し、さまざまな側面に独自の色を設定できます。

他のヒント

CSS 3（8.5.3項）の仕様ではありません：

  

値に描画される境界線の色   「溝」、「尾根」、「はめ込み」、   'outset'は要素の   境界線の色のプロパティ、ただしUAは   独自のアルゴリズムを選択して   使用される実際の色を計算します。

技術的には、「独自のアルゴリズムを選択する」と思います。開発者がそれらを設定できるようにすることもできますが、現時点ではユーザーエージェントはそれを行っていないようです。もちろん、たとえそれらが行われたとしても、そのレンダリングエンジンのみのソリューションがあります。

これを行う公式の方法はありませんが、おそらくその効果を模倣することができます。隆起した境界線は、実際には、それ自体の周りに開始境界線を持つ挿入枠です（これは、左/上と下/右の境界色がわずかに異なる単なる実線です）。

これらの線に沿ったものは、あなたが望むもの、またはまさに探していたもののかなり良い近似を得るはずです。

 .inset{
      margin:0px;
      border: 1px inset #abc;
 }
 .outset{
      padding:0px;
      border:1px outset #cba;
 }

<div class='outset'>
     <div class='inset'>
          content goes here
     </div>
</div>

<style>
.a
{
        border: solid yellow 2px;
        border-top-color:red;
        border-left-color:red;

}
.b
{
        border: solid red 2px;
        border-top-color:yellow;
        border-left-color:yellow;
}
</style>
<div class='a'>
  <div class='b'>
        some text
  </div>
</div>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top