1

私の目標は、純粋な css で境界線を使用してそのような効果を得ることです。お願いしたいのですが、可能ですか（または画像を使用する必要がありますか）？そのようなスパン属性やアウトラインなどを使用する必要がありますか? 多分あなたは私がそれを行う方法のチュートリアルを見つけることができることを知っていましたか?

最初の境界線

2番目

三番

4

2 に答える 2

1

ボーダーを使用しないが、純粋な CSS である別の可能性は、疑似要素を使用した風変わりな作業です。

例えば：

p:after {
  content: '';
  background-color: red;
  position: absolute;
  width: 20px;
  left: 0;
  top: -2px;
  bottom: -2px;
  z-index: -1;
}

ここでデモを見ることができます: http://jsbin.com/iduvoj/1/edit

最後の例の別のデモを次に示します: http://jsbin.com/igotul/1/edit

これは、スタックする要素の数、段落に無地の背景色を使用できるかどうかなど、いくつかの要素に依存しますが、うまくいく可能性があります.

また、かなりよくサポートされているもの:beforeにのみ依存します: http://caniuse.com/#search=before:after

于 2013-05-29T15:56:47.523 に答える
1

これは注意が必要です。

ボーダーを使用して提供できる最高のものは CSSborder-imageです。これにより、ほとんど任意のボーダーデザインを設計できます。詳しくは MDNで読むことができます。

必要に応じて、境界線の長さ全体に画像を引き延ばしたり、各辺や角などに個別の画像を使用したりできるように設計されているため、非常に柔軟であるという利点があります。

CSS コード自体は比較的単純なので、上記の MDN ページにあるもの以外の例は示しません。それを機能させるために必要な主なものは実際の画像であり、それは自分で提供する必要があるものです。

ただし、主な問題border-imageはブラウザのサポートです。これは CSS に比較的最近追加されたものであり、かなり最近のブラウザーの中にはそれをサポートしていないものもあります。これには IE10 が含まれます。必要なものによっては、これを解決策として台無しにする可能性があります。

したがって、クロスブラウザーでより適切に機能する代替ソリューションは、単に境界線を背景画像として定義することです。これはかなり明白で、実際には非常にうまく機能します。ボックスの高さが大きく異なる場合、スケーリングで問題が発生する可能性がありますが、これは複数の背景画像を使用することで回避できます。

それが役立つことを願っています。

于 2013-05-29T09:49:10.210 に答える