Bir elementin içindeki yukarı ve aşağı yöndeki taşmalarının nasıl olacağını belirlemek için kullanılır.
div {
width: 500px;
height: 300px;
overflow-y: hidden;
overflow: scroll;
}
| Değer | Açıklama |
| visible | Taşma gizlenmez. |
| hidden | Taşma gizlenir. |
| scroll | Taşma scroll ile gizlenir. |
| auto | Taşma otomatik ayarlanır. |
| İnital | |
| İnherit |
| 4.0 | 3.5 | 9.5 | 3.0 | 9.5 |
Bir elementin içindeki sağ ve sol yöndeki taşmalarının nasıl olacağını belirlemek için kullanılır.
div {
width: 300px;
height: 200px;
overflow-x: hidden;
border: 1px solid green;
}
| Değer | Açıklama |
| visible | Taşma gizlenmez. |
| hidden | Taşma ebgellenir. |
| scroll | Taşma scroll ile gizlenir. |
| auto | Taşma otomatik ayarlanır. |
| İnital | |
| İnherit |
| 4.0 | 3.5 | 3.0 | 9.0 | 9.5 |
Bir elementin içindeki taşmaların ne olacağını belirlemek için kullanılır.
div {
width: 400px;
height: 400px;
overflow: scroll;
background: red;
color: white;
}
| Değer | Açıklama |
| visible | Taşma engellemez. |
| hidden | Taşmayı engellemek için kullanılır. |
| scroll | Taşma scroll ile gizlenir. |
| auto | Taşma otomaik olarak ayarlanır. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 7.0 |
Bir elementin outline çizgisinin kalınlığını belirlemek için kullanılır.
div {
width: 300px;
padding: 20px;
outline-style: dashed;
outline-color: green;
outline-width: 10px;
margin: 30px;
}
| Değer | Açıklama |
| medium | Outline genişliğini orta olarak ayarlar. |
| thin | Outline genişliğini ince olarak ayarlar. |
| thick | Outline genişliğini kalın olarak ayarlar. |
| length | px, cm, % gibi değerler alabilir. |
| İnital | |
| İnherit |
| 1.0 | 1.5 | 8.0 | 1.2 | 7.0 |
Bir element sınırları ile outline çizgisinin stilini ayarlamak için kullanılır.
div {
outline-style: dashed;
outline-color: green;
width: 300px;
padding: 20px;
}
| Değer | Açıklama |
| none | Outline çizgisini kaldırır. |
| hidden | Outline çizgisini gizler. |
| dotted | Noktalı outline çizgisini çizer. |
| dashed | Kesik çizgili outline çizgisini çizer. |
| solid | Düz outline çizgisini çizer. |
| double | Çift outline çizgisini çizer. |
| groove | 3D grooved(Yivli) outline çizgisini çizer. Efekt renge göre değişkenlik gösterir. |
| ridge | 3D ridge(Çıkıntılı) outline çizgisini çizer. Efekt renge göre değişkenlik gösterir. |
| inset | 3D inset outline çizgisini çizer. Efekt renge göre değişkenlik gösterir. |
| outset | 3D outset outline çizgisini çizer. Efekt renge göre değişkenlik gösterir. |
| İnital | |
| İnherit |
| 1.0 | 1.5 | 8.0 | 1.2 | 7.0 |
Bir element sınırları ile outline çizgisinin arasındaki mesafeyi ayarlamak için kullanılır.
div {
margin: 40px;
width: 200px;
outline: 5px solid green;
outline-offset: 20px;
}
| Değer | Açıklama |
| length | px, cm, % gibi değerler alabilir. |
| İnital | |
| İnherit |
| 4.0 | 3.5 | Desteklenmiyor | 3.1 | 10.5 |
Outline’ın rengini belirlemek için kullanılır.
div {
width: 200px;
padding: 50px;
outline-style: dashed;
outline-color: #00ff00;
}
| Değer | Açıklama |
| invert | Rengi arka planı gösterecek şekilde şeffaf yapar. |
| color | Bir renk değeri alır. |
| İnital | |
| İnherit |
| 1.0 | 1.5 | 8.0 | 1.2 | 7.0 |
Bir element sınırları dışında çizili olan çizgidir. Ayarlanabilir özellikleri sırayla: rengi – tarzı – genişliği’dir. Yukarıdaki değerlerden biri eksik olursa varsayılan değer geçerli olacaktır.
div {
width: 200px;
outline: red dashed thick;
padding: 20px;
}
| Değer | Açıklama |
| outline-color | Outline rengini ayarlamak için kullanılır. |
| outline-style | Outline stilini ayarlamak için kullanılır. |
| outline-width | Outline genişliğini(kalınlığını) ayarlamak için kullanılır. |
| İnital | |
| İnherit |
| 1.0 | 1.5 | 8.0 | 1.2 | 7.0 |
Bir element içindeki diğer elementlerin sıralamasını belirtir.
Not: çalışması için flex değerinin olması gerekir.
div {
width: 50px;
height: 50px;
float: left;
margin-right: 5px;
color: white;
display: -webkit-flex; /* Safari */
display: flex;
}
.order1 {
background: red;
-webkit-order: 4;
order:4;
}
.order2 {
background: green;
-webkit-order: 3;
order:3;
}
.order3 {
background: blue;
-webkit-order: 2;
order:2;
}
.order4 {
background: pink;
-webkit-order: 1;
order:1;
}
| Değer | Açıklama |
| number | Elementin sırasını belirtir. |
| İnital | |
| İnherit |
| 29.0 21.0-webkit |
28.0 18.0-moz |
11.0 | 9.0 6.1-webkit |
7.0 |
Bir element için opaklık düzeyini belirler.
0.5 bize 50% lik opaklığa sahip olacağını belirtirken 0 tamamen saydam 1 ise hiç şeffaf olmayan değeri belirtir. Yani 0 ile 1 arasında bir değer alabilir.
.opacity {
background: red;
width: 300px;
height: 300px;
color: white;
opacity: 0.3;
}
| Değer | Açıklama |
| number | 0 (tamamen şeffaf) ile 1(tamamen opak) arası bir değer alır. |
| İnital | |
| İnherit |
| 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |