Boxen für CSS-Profis

Schatten, Rahmen und Hintergründe

Das ist ein zweites Quiz zum Thema "CSS Box-Modell". Es vertieft das Wissen über die Eigenschaften von Block-Tags.

 

1. Rahmen

Boxen können wie diese hier umrahmt sein. Welche CSS-Eigenschaft braucht es für die Definition des Rahmens?

 

2. Wo ist der Rahmen im Box-Modell?

Welche "Zwiebelschicht" nimmt der border in der Box ein?

 

3. Kurzform für border-Eigenschaften

Für den diesen Code gibt es eine praktische Kurzform. Wie notiert man sie?

#myDiv {
	border-width: 1px;
	border-style: solid;
	border-color: black;
}
 

4. Runde Ecken I

Ich möchte eine Box so wie diese hier mit runden Ecken definieren. Welche CSS-Eigenschaft setze ich dafür ein?

 

5. Runde Ecken II

Muss der Radius der Abrundung in allen vier Ecken der Box immer gleich sein?

#myDiv {
	border-radius: 8px;
}
 

6. line-style

Mit line-style hat man viele Möglichkeiten, die Linien-Art des borders zu bestimmen. Allerdings sind nur drei Linien-Stile wirklich angesagt. Welche?

 

7. background-image I

Man kann mit CSS Bilder im Hintergrund einer Box anzeigen lassen. Was ist der grösste Vorteil dieser Technik?

 

8. background-image II

Man kann mit CSS Bilder im Hintergrund einer Box anzeigen lassen. Was ist der grösste Nachteil dieser Technik?

 

9. background-image III

Man kann mit CSS Bilder im Hintergrund einer Box anzeigen lassen. Über welche Standard-Verhalten muss ich informiert sein?

 

10. Box mit Schattenwurf

Boxen können wie diese hier Schatten haben. Welche CSS-Eigenschaft ist dafür verantwortlich?