Heim > Artikel > Web-Frontend > Welche neuen Eigenschaften werden CSS3 hinzugefügt?
Welche neuen Eigenschaften werden CSS3 hinzugefügt?
- 清浅Original
- 2018-11-26 17:26:3018507Durchsuche
Zu den neuen Eigenschaften von CSS3 gehören: 1. Textschatten; 3. Farbtransparenz; 5. Mehrspaltiges Layout;
Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, CSS3-Version.
Heute werde ich Ihnen die neuen Attribute in CSS3 vorstellen, die einen gewissen Referenzwert haben.
Das Erscheinen der neuesten Version von CSS3 macht das Webdesign einfacher , obwohl dies nicht der Fall ist. Alle Browser unterstützen es. Aufgrund der schnellen technologischen Veränderungen und der modularen Standardisierung von CSS3 implementieren derzeit jedoch alle Browser eine vollständige CSS3-Unterstützung. Ich glaube, dass CSS3 und HTML5 in naher Zukunft die Zukunft des Internets sein werden Artikel. Neue Funktionen bei
Browserkompatibilitätsproblemen:
Firefox erfordert das Präfix -moz-.
Chrome und Safari erfordern das Präfix -webkit-.
[Empfohlene Kurse: CSS3-Tutorial]
CSS3-Textschatten
<div style="text-shadow: 5px 5px 5px #444;">这是一行文字</div>
CSS3-Hintergrundverlaufseffekt
Die lineare Verlaufseigenschaft in CSS3 ist nur in Safari 4, Chrome und Firefox verfügbar Bisher in 3.6 unterstützt.
dc4bdbf87cf6b13b96a0e690e9f65b5a16b28748ea4df4d9c2150843fecfba68
CSS3-Farbeffekt
hat jetzt Deckkraft
RGB wird in CSS zum Festlegen verwendet die Farbe des Elements, aber es gibt eine neue Operation in CSS3, die die Farbopazität festlegen kann. RGB wurde in RGBA konvertiert, was die Steuerung der Opazität des Elements vereinfacht.
<div style="width:50px;height:50px;background-color:rgba(123,123,123,0.4);"></div>
CSS3-Transformation (Elementdrehung)
CSS3 hat das Transformationsattribut zum Drehen von Elementen neu eingeführt
<div style="width:50px;height:50px;background-color: pink;-webkit-transform:rotate(40deg); ">旋转</div>
Mehrspaltiges CSS3-Layout
Im Weblayout muss jede Webseite sein In Spalten aufteilen und an verschiedene Browser anpassen. Die in CSS3 verwendeten mehrspaltigen Layouteigenschaften geben einfach die erforderliche Anzahl von Spalten an und erstellen diese dann sollten getrennt werden
div.content{
width:210px;
border:1px solid #ccc;
/*将当前内容分成3列*/
-webkit-column-count:3;
-webkit-column-gap:25px;/*列之间的间隔*/
-webkit-column-rule:1px solid #ccc;/*规定列之间的宽度、样式和颜色规则*/
}
</style>
</head>
<body>
<div class="content">
php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!
</div>
CSS3 kann auch jede benutzerdefinierte Schriftart im Web einbetten Seite, die Originalschriftart. Abhängig vom Clientsystem können Webseiten nur Schriftarten wiedergeben, die vom Browser oder Clientcomputer unterstützt werden. Mithilfe des @font-face-Attributs können Sie jedoch Schriftarten verwenden, die an anderer Stelle gefunden werden
@font-face
{
font-family: myFirstFont;
src: url(Sansation-Italic.ttf)
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>WWWWWW</div>
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, die neuen Eigenschaften von CSS3 zu verstehen.
Das obige ist der detaillierte Inhalt vonWelche neuen Eigenschaften werden CSS3 hinzugefügt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!