Wie erstelle ich schwebenden Text über einem Rahmen, ohne ihn zu verbergen, indem ich nur CSS und HTML verwende?

Text über einen Rand schweben lassen, ohne ihn auszublenden, nur mit CSS und HTML

Frage:

Wie können Sie einen erstellen? Textelement, das über einem Rahmen schwebt und ihn verbirgt und dabei nur CSS und HTML verwendet? Ist es außerdem möglich, das Div zu animieren und den Titel und die oberste Zeile anzuzeigen, wenn es ausgeblendet ist?

Antwort:

Überlappender Rand mit schwebendem Text

Um diesen Effekt zu erzielen, müssen Sie ein

Element anstelle eines

für die Grenze. Hier ist der CSS- und HTML-Code:

fieldset {
    border: 1px solid #000;
}

<fieldset>
  <legend>AAA</legend>
</fieldset>

Durch die Verwendung einer Legende im

erstellen Sie schwebenden Text, der den Rahmen überlappt. Der Rand wird nicht ausgeblendet, sondern durch die Legende überschrieben.

Animation mit jQuery

Bezüglich der Animation kann diese Frage nicht direkt beantwortet werden, da sie nicht Teil der war ursprüngliche Anfrage. Um das

zu animieren, müssen Sie die Animation separat mit jQuery implementieren.

Das obige ist der detaillierte Inhalt vonWie erstelle ich schwebenden Text über einem Rahmen, ohne ihn zu verbergen, indem ich nur CSS und HTML verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery css html for using this border animation

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn