CSS3 ist eine aktualisierte Version von CSS, die auch viele neue Funktionen bietet. Ich hoffe, dass dieser Artikel eine Zusammenfassung der neuen Funktionen von CSS3 darstellt es kann jedem helfen.
1. Adaptive Ellipse
Randradiusfunktion:
Sie können die horizontalen und vertikalen Radien separat angeben Der Wert kann ein Prozentsatz sein. Verwenden Sie einfach / (Schrägstrich), um die beiden Werte zu trennen (eine Ellipse mit adaptiver Breite kann implementiert werden).
Sie können auch vier horizontale und vertikale Radien mit unterschiedlichen Winkeln angeben (Halbellipse kann realisiert werden)
Viertelellipse, hauptsächlich Is to Passen Sie den horizontalen und vertikalen Radius an
Beispielcode:
.wrap{
border-radius: 50% / 30%;
width: 60px;
height: 80px;
background: yellow;
}
.wrap02{
width: 60px;
height: 80px;
background: yellow;
border-radius: 50% / 100% 100% 0 0;
}
.wrap03{
width: 60px;
height: 80px;
background: yellow;
border-radius: 100% 0 0 0;
}Nach dem Login kopieren
2. Das flache Viereck
muss auf den SkewX der Transformation zur Verzerrung angewendet werden
Das Hauptproblem besteht darin, dass Der Container wird zu einem flachen Viereck, und der Text und die Elemente im Inneren werden vertikal angezeigt, und die verschachtelten Elemente werden vertikal angezeigt. Die internen Elemente können durch Schrägstellung umgekehrt gedreht werden. Verschachtelte innere Elemente müssen blockartig sein, da die Transformation nicht auf Inline-Elemente angewendet werden kann.
Verwenden Sie Pseudoelemente zur Verzerrung (:before)
.wrap{
width: 80px;
height: 40px;
transform: skewX(-45deg);
background: yellow;
}
.wrap>p{
transform: skewX(45deg);
}
.btn{
position: relative;
padding: 10px;
}
.btn:before{
content: '';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: -1;
background: #85a;
transform: skewX(-45deg);
}Nach dem Login kopieren
3. Raute
Wenden Sie die Verschachtelung von Elementen an, und die äußeren und inneren Elemente drehen sich miteinander, um eine zu erreichen achteckige Form ;
4. Eckenschneideffekt
.wrap{
width: 200px;
transform: rotate(-45deg);
overflow: hidden;
}
.wrap > img{
transform: rotate(45deg) scale(1.42);
max-width: 100%;
}Nach dem Login kopieren
Mit Linear-Gradient können Sie Winkel, Mehrwert und Verlaufstransparenz festlegen, um dies zu erreichen.
Sie müssen auch auf die Einstellungen der Attribute „Hintergrundgröße“ und „Hintergrundwiederholung“ achten, um zu verhindern, dass überlappende Hintergründe dazu führen, dass der Effekt nicht wirksam wird
Sie können „Border-Image“ verwenden, um Ecken zu schneiden und den Wert von „Border-Image“ festzulegen -slice (der Bildrand ist nach innen versetzt);
.wrap{
width: 200px;
height: 100px;
background: #58a;
background: linear-gradient(-135deg, transparent 15px, #58a 0px) top right,
linear-gradient(135deg,transparent 15px, #655 0px) top left,
linear-gradient(-45deg, transparent 15px, #58a 0px) bottom right,
linear-gradient(45deg, transparent 15px, #655 0px) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}Nach dem Login kopieren
border-image verwendet SVG, um Bilder zu erstellen
- border legt Breite + Transparenz fest, plus border-image-slice wird nach innen versetzt. Dadurch wird ein Rand ausgeschnitten.
- background-clip: Auf padding-box setzen, sonst reicht der Hintergrund bis zum Rand.
- Andere Lösungen
Nutzung des Clip-Path-Attributs, aber nicht vollständig unterstützt
.wrapSvg{
border:15px solid transparent;
border-image: 1 url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a"><polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/></svg>');
margin-top: 50px;
width: 200px;
height: 100px;
background: #58a;
background-clip: padding-box;
}Nach dem Login kopieren
css4 gibt direkt das Eckpfadattribut an, um das Eckenschneiden zu unterstützen
- Verstehen Sie die Grundprinzipien der Transformation
a und d stellen die Skalierung dar und können nicht 0 sein; e und f steuern die Verschiebung
Übersetzen (Verschiebung): Matrix(1,0,0,1,x,y)
Skalierung (Zoom): Matrix(x,0,0, y ,0,0);
- skew (skew): Matrix(1,tany,tanx,1,0,0), da die Eingabe Grad (Winkel) ist, der Winkel muss in Bogenmaß umgewandelt werden
- drehen (Rotation): Matrix(cosN,sinN,-sinN,cosN,0,0), Winkel in Bogenmaß umgewandelt
-
Die Anwendung der oben genannten Werte hängt mit dem Wert von transform-origin zusammen, der der Ursprung der Drehung des Positionierungselements ist, der oben, unten, in der Mitte usw. liegen kann. Drei Koordinatensysteme von x, y und z können angegeben werden - Perspektive: Perspektive, es kann nicht negativ sein, 0 oder Prozentsatz, es kann nur ein numerischer Wert sein
stellt a dar; Abstand vom Beobachter zum beobachteten Objekt
Je weiter der perspektivische Abstand vom Objekt ist, desto kleiner erscheint das Objekt
- Perspektive kann Nur für das übergeordnete Element oder den Vorfahren des verformten Elements festgelegt werden, da der Browser dies tut. Die Verformung erzeugt einen perspektivischen Effekt.
- Bei der 3D-Transformation gibt es kein Skew-Attribut.
- 6. Einfaches Kreisdiagramm
Animiertes Kreisdiagramm, der Effekt ist wie folgt: 
Die Umsetzungsschritte sind wie folgt:
画出一个yellowgreen的圆，并利用linear-gradient设置background-image的值，实现两种颜色各显示一半的功能：
然后加入一个伪元素，继承父级（真实元素）的背景色，然后用rotate旋转即可
动画展示代码如下：
@keyframes spin{
to{ transform: rotate(.5turn); }
}
@keyframes bg{
50%{ background-color: #655; }
}
.wrap{
width: 100px; height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, #655 0);
}
.wrap::before{
content: '';
display: block;
margin-left: 50%;
background-color: inherit;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
transform-origin: left;
animation:spin 3s linear infinite,
bg 6s step-end infinite;
}Nach dem Login kopieren
相关推荐：
关于图形形状的文章推荐
仅用CSS 创建各种不同的图形形状
使用CSS创建各种不同的图形形状的方法
Das obige ist der detaillierte Inhalt vonZusammenfassung der Formen über neue Funktionen von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
