css3アウトライン属性-CSSチュートリアル-php.cn

css3アウトライン属性

巴扎黑

リリース： 2017-06-28 13:55:14

オリジナル

2069 人が閲覧しました

CSS3 関連の記事を読んでいるときに、CSS スタイルを使用して「+」プラス記号効果を実現する方法を見ました

ここで、新しい CSS3 属性であるアウトラインに出会いました。中国語に翻訳すると、「アウトライン」となります。

文法：outline:outlineWidth、outlineStyle、outlineColor;

例：outline:5pxソリッドブルー;

そして、私のテストによると、ここの5ピクセル、ソリッド、ブルーは、表示効果に影響を与えることなく自由に交換できます。

そして、この属性はボックスモデルの一部であるため、スペースを占有しません。使用するときに幅や高さなどを計算する必要はありません。ブラウザのサポートも良好です: IE8+。および他の主流ブラウザはそれをサポートしています。 Firefox は、border-radius

と同じ、outline-radius もサポートしています。

「+」の例を見ると、

<p>第一个方法是使用outline－offset的向内偏移结合border实现的，不兼容所有IE，safari上也有点问题，要用chrome查看才行</p>
<p class="use-outline-offset"></p>


<style>
.use-outline-offset{
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  height: 200px;
  border:40px solid #000000;
  background-color:#cccccc;
  outline-width:40px;
  outline-style:dotted;
  outline-offset:-80px;
  box-sizing: border-box;
}
</style>

ログイン後にコピー

には、アウトラインオフセットである属性も記載されています。これは、負の値がサポートされています。これは、AI のパスやオフセットパスを思い出させます。負の値は内側にオフセットされます。したがって、「+」記号効果が実装されます。

outline-offset 属性は、IE を除くすべての主流ブラウザーでサポートされます (テスト後、実際にはサポートされていません)。

しかし、この属性はあまりスペースを占有せず、作業効率を向上させることができ、また、outline-offset と組み合わせることで、いくつかの予期せぬ効果を達成することができます。

以上がcss3アウトライン属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。