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;
}
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);
}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 ;
Gestalten Sie die maximale Breite des internen Elements so, dass das gesamte Bild nur das gesamte äußere p ausfüllen kann 🎜>
Das Scale-Attribut steuert die Vergrößerung seines Bildes. Standardmäßig ist der Mittelpunkt der Ursprung der Vergrößerung (es wird der Satz des Pythagoras verwendet, geben Sie keinen zusätzlichen Transformationsursprung an).
4. Eckenschneideffekt
.wrap{
width: 200px;
transform: rotate(-45deg);
overflow: hidden;
}
.wrap > img{
transform: rotate(45deg) scale(1.42);
max-width: 100%;
} 
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
.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;
}
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;
}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)
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
Animiertes Kreisdiagramm, der Effekt ist wie folgt: 
Die Umsetzungsschritte sind wie folgt:
画出一个yellowgreen的圆，并利用linear-gradient设置background-image的值，实现两种颜色各显示一半的功能：
然后加入一个伪元素，继承父级（真实元素）的背景色，然后用rotate旋转即可
要利用margin-left让其靠左
利用transform-origin设置其旋转定位点
动画展示代码如下：
@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;
}相关推荐：
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!
