CSS border-image-repeat

border-image-repeat :

border-image-repeat özelliği, border ‘ ın belirtilen boyutlar içinde tekrarlanmasını sağlar.

Örnek

#borderimage{
    -webkit-border-image: url(http://w3tr.com/file/border.png) 50 round;
    -o-border-image: url(http://w3tr.com/file/border.png) 50 round; 
    border-image: url(http://w3tr.com/file/border.png) 50 round;
    border-image-repeat: repeat;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
stretch Varsayılan değer. Görüntü alanını kaplayacak şekilde genişletilir.
repeat Görüntü alanını sınırlanan bölge kadar tekrar eder.
round Görüntünün iki noktası arasındaki bölgesi tekrarlanmasını sağlar.
İnital
İnherit

Tarayıcı Desteği

15.0 15.0 11.0 6.0 15.0

CSS border-image-outset

border-image-outset :

border-image-outset özelliği, border ‘ ın belirtilen boyuttan ne kadar dışarı taşacağını beliritir.

Örnek

#borderimage{
        -webkit-border-image: url(http://w3tr.com/file/border.png) 50 round;
    -o-border-image: url(http://w3tr.com/file/border.png) 50 round; 
    border-image: url(http://w3tr.com/file/border.png) 50 round;;
      border-image-outset: 10px;}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
length Ne kadar taşacağını belirler. Varsayılan değer 0 ‘ dır.
number Borderların sıralamasına göre uzaklık atamamızı sağlar.
İnital
İnherit

Tarayıcı Desteği

15.0 15.0 11.0 6.0 15.0

CSS border-image

border-image :

Border-image özelliği bir elementin borderlarına resim ataması özelliğini kullanmamızı sağlar.

Not: border-color özelliğinden önce border-style özelliğinin tanımlanmış olması gerekir.

Örnek

#borderimage1{
   -webkit-border-image: url(http://w3tr.com/file/border.png) 50 round;
    -o-border-image: url(http://w3tr.com/file/border.png) 50 round; 
    border-image: url(http://w3tr.com/file/border.png) 50 round;
}
#borderimage2{
  -webkit-border-image: url(http://w3tr.com/file/border2.png) 50 round;
   -o-border-image: url(http://w3tr.com/file/border2.png) 50 round; 
   border-image: url(http://w3tr.com/file/border2.png) 50 round;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
border-image-source Görüntünün yolunu belirtmek için kullanılır.
border-image-slice border bölümlerinin sınırlarını gösterir.
border-image-width border a verilen resmi genişliğini belirlememize olanak sağlar.
border-image-outset Belirlenen sınırın dışına, ötesine uzamasını sağlar.
border-image-repeat Verilen görüntünün kapladığı miktar boyunca tekrar etmesini sağlar.
İnital
İnherit

Tarayıcı Desteği

16.0
4.0-webkit
15.0
3.5-moz
11.0 6.0
3.1-webkit
15.0
11.0 -o

CSS border-color

border-color :

Border-color özelliği bir elementin dört sınırlarının rengini ayarlar. Bu özellik bir ila dört değerlere sahip olabilir.

Not: border-color özelliğinden önce border-style özelliğinin tanımlanmış olması gerekir.

Örnek

p.tekli {
    border-style: solid;
    border-color: #0000ff;
}

p.ikili {
    border-style: solid;
    border-color: #ff0000 #0000ff;
}

p.uclu {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff;
}

p.dortlu {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
color Arkaplan rengini belirler varsayılan değer siyahtır.
transparent Rengin şeffaf olması gerektiğini belirtir.
İnital
İnherit

Tarayıcı Desteği

1.0 1.0 4.0 1.0 3.5

CSS border-collapse

border-collapse :

border-collapse özelliği, table ve içindeki sutunlar için ayrı ayrı border tanımlamamızı olanak sağlar.

Örnek

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid blue;
}

Codepen Ön izleme

Css Sözdizimi

 

Değer Açıklama
separate Değerlere boşluk ayırt etmeden border verilmesini sağlar.
collapse Genel tabloya border verilir sadece.
İnital
İnherit

Tarayıcı Desteği

 

1.0 1.0 5.0 1.2 4.0

CSS border-bottom-width

css border-bottom-width :

border-bottom-width özelliği, border ‘ ın genişlik boyutunu tanımlamamızı sağlar.
Not: border ‘ ın width özelliğini belirtmeden önce kesinlikle border-style özelliği verilmelidir.

Örnek

#border-bottom-width{
     border-style: solid;
    border-bottom-width: 10px;
    color: blue;
}

Codepen Ön izleme

Css Sözdizimi

 

Değer Açıklama
medium varsayılan değer.
thin ince bir sınır sitilini vermemizi sağlar.
thick ince bir sınır sitilini vermemizi sağlar.
length Nokta biçiminde stil verir.
İnital
İnherit

 

Tarayıcı Desteği

 

1.0 1.0 4.0 1.0 3.5

CSS background-position

background-position :

Arka plandaki görüntünün pozisyonunu belirlemek için kullanılır.

Örnek

.position {
  height: 17px;
  background-image: url('http://www.w3tr.com/file/html5.png');
  background-repeat: no-repeat;
  background-position: center;
}

Codepen Ön izleme

 

Css Sözdizimi

 

Değer Açıklama
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Eğer tek bir değer verirseniz alacağı diğer değer otomatik olarak “center” olacaktır.
x% y% İlk değer yatay pozisyon ve ikinci değer dikey . Sol üst köşesi 0% 0 % ‘dir. Sağ alt köşede % 100 % 100’dür. Eğer tek bir değer belirtirseniz , diğer değer % 50 olacaktır . . Varsayılan değer : 0 % 0%
xpos ypos İlk değer yatay pozisyon ve ikinci değer dikey . Sol üst köşesi 0px 0px ‘dir. Sağ alt köşede % 100 % 100’dür. Eğer tek bir değer belirtirseniz , diğer değer % 50 olacaktır.
initial
inherit

Tarayıcı Desteği

2.0 1.0 4.0 1.0 3.5

CSS align-items

align-items:

Obje içindeki nesneleri kenarlardan itibaren dikey ortalama yapar.

Örnek:

div {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

 

See the Pen RWyOOJ by W3TR (@w3tr) on CodePen.

CSS Sözdizimi

 

Değer Açıklama Örnek
stretch  Öğeler ana objeye sığacak kadar uzatılır.
center  Öğeler ana objenin merkezine konumlandırılır.
flex-start  Öğeler ana objenin başında konumlandırılır.
flex-end  Öğeler ana objenin sonunda konumlandırılır.
Baseline  Öğeler ana objenin başında konumlandırılır. .
initial  Varsayılan değerine bu özelliğini ayarlar.
inherit  Bir üst elementinin değerini alır.(Kalıtsallık)

Tarayıcı Desteği

 

21.0 20.0 11.0 7.0 -webkit 12.1

CSS align-content

align-content:

Ana objenin içindeki diğer objeleri dikey eksen üzerinde hizalamasını yapar.

Not: Bu özelliğin etki etmesi için ana obje içindeki nesnelerin birden fazla olması gerekmektedir.

Örnek :

div {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

See the Pen CSS align-content: stretch ; by W3TR (@w3tr) on CodePen.

CSS Sözdizimi

Değer Açıklama Örnek
stretch Öğeler ana objenin içine sığacak şekilde sıralanır. İlk öğe en üst konuma bitişik başlar.
center Öğeler ana objenin merkezine konumlandırılır.
flex-start Öğeler ana objenin başında konumlandırılır. Hepsi ardı ardına sıralanır.
flex-end Öğeler ana objenin sonunda konumlandırılır. Hepsi ardı ardına sıralanır.
space-between Öğeler üst ve alt kısımlar öncelik olmak üzere konumlandırılır. Bu iki öğe için üst ve alt 3 öğe için üst alt ve orta kısımlara konumlandırılırlar.
space-around Öğeler obje içerisinde eşit olarak dikey olarak ortalanırlar.

Tarayıcı Desteği

21.0 -webkit 28.0 11.0 9.0
7.0 -webkit
12.10