Heim  >  Artikel  >  Web-Frontend  >  Welche neuen Eigenschaften werden CSS3 hinzugefügt?

Welche neuen Eigenschaften werden CSS3 hinzugefügt?

清浅
清浅Original
2018-11-26 17:26:3018491Durchsuche

Zu den neuen Eigenschaften von CSS3 gehören: 1. Textschatten; 3. Farbtransparenz; 5. Mehrspaltiges Layout;

Welche neuen Eigenschaften werden CSS3 hinzugefügt?

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>

Image 23.jpg

CSS3-Hintergrundverlaufseffekt

Die lineare Verlaufseigenschaft in CSS3 ist nur in Safari 4, Chrome und Firefox verfügbar Bisher in 3.6 unterstützt.

dc4bdbf87cf6b13b96a0e690e9f65b5a16b28748ea4df4d9c2150843fecfba68

Image 24.jpg

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>

Image 27.jpg

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>

Image 25.jpg

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>

Image 28.jpg

CSS3 Web Fonts

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>

Image 26.jpgZusammenfassung: 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!

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