マルチフレームを達成するためのCSSの方法

あなただけが要求することができない、予期しない需要がありません。

私たちは、多要素のボーダーのニーズを見てください。ボーダーのために我々は考えている境界線を使用することで、そこに何も間違っては、あるこのようなものです。ただし、このプロパティは、国境を実現することができます(これまでのところ、このようなものです)。

国境で見てみましょう:

 

コードは以下の通りであります:

 

私たちは、マルチボーダー、唯一の別の方法を達成するために伝統的な方法を使用することはできません。

まず、位置決め要素の複数(これは示さない)重複します

第二、重複する擬似位置要素(これは示しません)

第三に、ボックスシャドウの使用は実装します

コードを見てください:

 

 実装を見てください:

 

拡張ボックスシャドウ実装の半径を使用して。

もちろん、これは欠陥があります:

1.固体のみの国境を達成することができます

2.実線境界要素は、特定の相互作用をすることができません。

コードを見てください:

 

 効果はありません上にのみ素子領域には、いわゆるフレームに移動し、黒の背景色であろう。

第四、アウトライン(ストローク実現)。

コードを見てください:

 

 結果は以下の通りであります:

 

ボックスシャドウ以上のように、輪郭が点線の境界線を実現することができます。

 

 

 

しかし、まだそのようなホバーなど、いくつかのインタラクティブな要素を達成することはできません。(彼らはそれを試してみることができます)私たちは、国境半径の要素の変化に変更することはできません、そして第三が可能です。

第四は、単純なシーム副作用を達成することができます:

 

 効果:

 

まだ少し味。

 

おすすめ

転載: www.cnblogs.com/jsydb/p/12590238.html