2

このコードを使用して、やや点線の境界線を作成しています。

CSS

.strip {
    height: 5px;
    width: 80px;
    background: repeating-linear-gradient(90deg, transparent, transparent 10px, #ffaacd 5px, #ffaacd 30px);
}

transparentとに対応する長さを切り替えて色を逆にしようとして#ffaacdいますが、うまくいきません。私はまっすぐなピンクの線を取得します。

ノート

border一部のレイアウトに影響するため使用できないので、背景だけを使用することに注意してください。

編集

私が達成しようとしていることを説明するためにフィドルを作成しました。

基本的に、私は何らかの形の凡例を作成しています。現在、ストリップは透明な色で始まっていますが、上のストリップと整列するようにピンク色で開始したいと考えています。

4

3 に答える 3

0

それはあなたが直接求めたものではありませんが、CSS アウトラインを使用することをお勧めします。これは、まさにあなたが望むもの (レイアウトに影響を与えない点線の境界線) を行い、はるかに単純であるためです。

.elem {
  width: 200px;
  height: 200px;
  outline: 2px dotted hotpink;
}
<div class="elem"></div>

于 2016-06-23T21:40:18.347 に答える
0

逆パターンを取得するには、長さではなく、色のみを交換する必要があります。color-stop 値の長さは連続した順序にする必要があります。小さい方が大きい場合 (...transparent 10px, #ffaacd 5px...スニペットのように)、後の値は前者 (つまり、この場合は 10px) に固定されます。

側面による概念実証のバリエーション:

.strip {
  background: repeating-linear-gradient(to right, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%), repeating-linear-gradient(to bottom, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%), repeating-linear-gradient(to right, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%), repeating-linear-gradient(to bottom, transparent, transparent 1%, #ffaacd 1%, #ffaacd 6%);
  background-size: 1000px 5px, 5px 1000px, 1000px 5px, 5px 1000px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: top center, center right, bottom center, center left;
}

.strip-inv {
  background: repeating-linear-gradient(to right, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%), repeating-linear-gradient(to bottom, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%), repeating-linear-gradient(to right, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%), repeating-linear-gradient(to bottom, #ffaacd, #ffaacd 1%, transparent 1%, transparent 6%);
  background-size: 1000px 5px, 5px 1000px, 1000px 5px, 5px 1000px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: top center, center right, bottom center, center left;
}
<textarea class="strip">resize me</textarea> <textarea class="strip-inv">resize me</textarea>

于 2016-06-23T21:58:19.573 に答える