Heim > Artikel > Web-Frontend > Ein paar kleine Kenntnisse über CSS3

Ein paar kleine Kenntnisse über CSS3

零到壹度Original: 2018-03-21 11:42:051077Durchsuche

In diesem Artikel geht es hauptsächlich darum, ein paar kleine Kenntnisse über CSS3 mit Ihnen zu teilen. Ich hoffe, er kann Ihnen helfen. Schauen wir uns das unten mit dem Herausgeber an.

Box-Shadow fügt Schatten zum p-Element hinzu
Box-Shadow: H-Shadow V-Shadow-Unschärfe-Spread-Farbeinsatz;
H-Shadow: erforderlich. Die Position des horizontalen Schattens. Negative Werte erlaubt
v-shadow: Erforderlich. Die Position des vertikalen Schattens. Negative Werte zulassen
Unschärfe: Optional. Fuzzy-Distanz
Spread: optional. Die Größe der Schatten
Farbe ist optional. Die Farbe des Schattens. Die vollständige Liste der Farbwerte finden Sie unter CSS-Farbwerte
Einfügung Optional. Ändern Sie den inneren Schatten des inneren Schattens vom äußeren Schatten (am Anfang)
2.transform: Drehen Sie das p-Element
Kompatibilitätsprobleme:
-ms-transform:rotate(7deg); / * IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari und Chrome */
-o-transform:rotate(7deg); /* Opera */
3.transition: Bitte bewegen Sie den Mauszeiger auf das blaue p-Element, um den Übergangseffekt zu sehen.
ad846d1ec8764448f5d4e08a5ccc7b3f Bitte bewegen Sie den Mauszeiger auf das blaue p-Element, um den Übergangseffekt zu sehen. 94b3e26ee717c64999d7867364b1b4a3
```
!DOCTYPE html>
<html>
<head>
<style> 
p
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
p:hover
{
width:300px;
}
</style>
</head>
<body>
<p></p>
```
e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419Hinweis: 0d36329ec37a2cc24d42c7229b69747aDieses Beispiel funktioniert nicht im Internet Explorer. 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Das obige ist der detaillierte Inhalt vonEin paar kleine Kenntnisse über CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Vorheriger Artikel：Erstellen Sie mit CSS ein Eingabeaufforderungsfeld „Laden“.Nächster Artikel：Erstellen Sie mit CSS ein Eingabeaufforderungsfeld „Laden“.

In Verbindung stehende Artikel

Mehr sehen