Css3 Border Yeni Özellikler

1- Border Radius

Yeni gelen özellikle beraber herbir köşeye ayrı radius değeri verilebilmektedir.

}
  border: 2px solid red;
  padding: 10px;
  border-radius: 2em / 5em;
}

#example2 {
  border: 2px solid red;
  padding: 10px;
  border-radius: 2em 1em 4em / 0.5em 3em;
}
Online olarak https://www.cssmatic.com/border-radius

border-radius: 2em / 5em:

CSS3 web tasarımda çok güzel özellikler getirmiştir.Bunlardan biride border-radius yani oval köşe bir çok yerde kullanabiliriz bunu. Hemen kodlara geçelim. 4 köşeyide aynı oranda oval yapmak için kodumuz border-radius bir örnek yapalım.

border-radius: 2em 1em 4em / 0.5em 3em:

NOT : css3 de kodları aynısını başına webkit moz o koyarak yazıyoz tarayıcı uyumu için.Yani her css3 kodu nu 4 kere yazıyoz.Bunu yapmazsanız daha sonra tarayıcı uyumsuzlukjları çıkar.

---

a) border-left-color

 border-style: solid;

 border-left-color: #92a8d1;

A heading with a colored left border

The border-left-color can be specified with a hexadecimal value.

b) border-right-style

.dotted1 {
  border-right-style: dotted;
}

.dotted2 {
  border-style: solid;
  border-right-style: dotted;
}

A heading with a dotted right border

A div element with a dotted right border.

---

c) border-image

border: 10px solid transparent;
border-image:url('border.png') 2% round ;

En büyük siteyi yaptım..80% round

En büyük siteyi yaptım..50% round

En büyük siteyi yaptım.. 30% round

En büyük siteyi yaptım..9% round

En büyük siteyi yaptım.. 2% round

---

border: 10px solid transparent;
border-image:url('border.png') 2% space;

En büyük siteyi yaptım..80% space

En büyük siteyi yaptım..50% space

En büyük siteyi yaptım.. 20% space

En büyük siteyi yaptım..9% space

En büyük siteyi yaptım.. 2% space

---

border: 10px solid transparent;
border-image:url('border.png') 2% stretch;

En büyük siteyi yaptım..80% stretch

En büyük siteyi yaptım..50% stretch

En büyük siteyi yaptım.. 20% stretch

En büyük siteyi yaptım..9% stretch

En büyük siteyi yaptım.. 2% stretch

---

Resmi 9 parçaya bölüp. Ona göre köşelerinden uzaltıp kısaltma işi yapmaya yarıyor.

---

1