Sınır çift kenarlık. CSS kullanarak çift kenarlık

CSS çerçevesi Bir öğe, öğenin içeriğini ve dolgusunu çevreleyen bir veya daha fazla satırdır. Sınır, kısa özellik sınırı kullanılarak ayarlanır. Çerçeve stili, üç özellik kullanılarak ayarlanır: stil, renk ve Genişlik.

HTML Öğelerinin Kenarlıklarını ve Kenarlıklarını CSS Özellikleriyle Süsleme

1. Sınır tarzı

Varsayılan olarak, kenarlıklar her zaman bir öğenin arka planının üzerine çizilir, arka plan öğenin dış kenarına kadar uzanır. Çerçevenin stili, görünümünü belirler, bu olmadan çerçevenin özellikleri hiç görünmez. Bir öğe için, border-style özelliğini kullanarak tüm kenarlar için aynı anda veya border-top-style niteleme özelliklerini kullanarak her kenar için ayrı ayrı vb. ayarlayabilirsiniz. Miras alınmadı.

kenarlık stili (kenarlık üst stili, kenarlık sağ stili, kenarlık alt stili, kenarlık sol stili)
Değerler:
Yok	Varsayılan değer, çerçeve olmadığı anlamına gelir. Ayrıca, bu özellik kümesinin değerine sahip öğe grubundan öğenin kenarlığını kaldırır.
gizlenmiş	Hiçbirine eşdeğer.
noktalı	noktalı
kesikli	kesikli
sağlam	sağlam
çift	çift
oluk	oluk
çıkıntı	çıkıntı
iç metin	iç metin
başlangıç	başlangıç
{1,4}	Yalnızca border-style özelliği için, bir öğenin kenarlıkları için aynı anda dört farklı stili numaralandırın: (kenarlık stili: düz noktalı hiçbiri noktalı değil;)
ilk
miras

Sözdizimi

P (kenarlık stili: düz;) p (kenarlık üst stili: düz;)

2. Kenarlık rengi kenarlık rengi

Özellik, tüm tarafların çerçevelerinin rengini aynı anda ayarlar. Bir öğenin her bir tarafının kenarlığı için özel bir renk ayarlamak için iyileştirme özelliklerini kullanabilirsiniz. Kenarlık rengi belirtilmemişse, öğenin metin rengiyle aynı olacaktır. Öğenin metni yoksa, kenarlık rengi ana öğenin metin rengiyle aynı olacaktır. Miras alınmadı.

sınır rengi (kenarlık-üst-renk, kenarlık-sağ-renk, kenarlık-alt-renk, kenarlık-sol-renk)
Değerler:
şeffaf	Çerçevenin saydam rengini ayarlar. Bu durumda, çerçevenin genişliği kalır. Öğeyi hareket ettirmekten kaçınmak için fareyi bir öğenin üzerine getirdiğinizde kenarlığın rengini değiştirmek için kullanılabilir.
renk	Çerçeve rengi, özellik değerleri kullanılarak ayarlanır. (kenarlık rengi: #cacd58;)
{1,4}	Yalnızca border-color özelliği için, bir öğenin kenarlıkları için aynı anda dört farklı rengi numaralandırın: (kenarlık rengi: #cacd58 #5faf8a #b9cea5 #aab238;)
ilk	Bir özelliğin değerini varsayılan değerine ayarlar.
miras	Özellik değerini üst öğeden devralır.

Sözdizimi

P (kenarlık rengi: #cacd58;)

3. Sınır genişliği

Çerçeve genişliği, uzunluk birimleri veya anahtar sözcükler kullanılarak belirtilir. border-style özelliği none olarak ayarlanmışsa ve elemanın kenarlığı bir genişliğe ayarlanmışsa, bu durumda sınırın genişliği sıfıra ayarlanır. Miras alınmadı.

Sözdizimi

P (kenarlık genişliği: 2 piksel;)

4. Çerçeveyi tek bir özellik ile ayarlama

border özelliği şu özellikleri birleştirmenize olanak tanır: border-width , border-style , border-color , örneğin:

Div (genişlik: 100 piksel; yükseklik: 100 piksel; kenarlık: 2 piksel düz gri; )

Bu durumda, belirtilen özellikler, elemanın tüm sınırlarına aynı anda uygulanacaktır. Herhangi bir değer belirtilmezse, varsayılan değer onun yerini alır.

5. Bir elemanın bir kenarlığı için çerçeve ayarlama

Bir öğenin kenarlıklarının farklı bir stilini ayarlamanız gerektiğinde, karşılık gelen kenarlık için kısa bir notasyon kullanabilirsiniz.
Aşağıda listelenen özellikler, şu özellikleri tek bir bildirimde birleştirir: border-width , border-style ve border-color . Özellikler listesi belirtilen sırada belirtilirken, bir veya iki değer atlanabilir, bu durumda değerleri varsayılan değerleri alacaktır.

Üst sınırın stili border-top özelliği kullanılarak ayarlanır, alt sınır border-bottom, sol kenar border-left ve sağ border border-right şeklindedir.

Sözdizimi

P (kenarlık üstü: 2 piksel düz gri;)

6. Anahat anahattı

Özellik, öğelerin etrafındaki dış sınırı ayarlar (yani normal sınırın dışında). Bu özelliğin temel amacı bir öğeyi vurgulamaktır. Border özelliğinden farklı olarak, bu özelliğin uygulanması elemanın boyutunu veya konumunu etkilemez. anahat, öğe kutusunun üstünde oluşturulur ve bu da, öğenin kenar boşluklarının ve bitişik alanların üst üste gelmesine neden olabilir.

Ayrıca, dış çerçeve, öğenin sınırından farklı olarak, öğeyi her yönden çevreler ve onu tamamen çerçeveler.

Dış anahat her zaman dikdörtgendir ve border-radius olarak ayarlanan kutunun kenarlığını takip etmez.

Anahat özelliği, şu özellikleri birleştirmenize olanak tanır: anahat-renk , anahat-stil , anahat-genişlik . Herhangi bir değer belirtilmezse, varsayılan değer onun yerini alır.

Div (genişlik: 100 piksel; yükseklik: 100 piksel; ana hat: #cacd58 düz 2 piksel; )

6.1. Anahat stili anahat stili

Dış kontur çizgisinin görünümü, eleman çerçevesinin stiliyle aynı şekilde ayarlanır. Miras alınmadı.

Sözdizimi

P (anahat stili: sırt;)

6.2. Anahat rengi anahat rengi

Dış anahat rengi, yalnızca anahat stili ayarlandığında ayarlanabilir. Miras alınmadı.

Sözdizimi

P ( anahat stili: sırt; ana hat rengi: gümüş; )

6.3. Dış anahat genişliği anahat genişliği

Dış kontur çizgisinin kalınlığı, eleman çerçevesinin kalınlığı ile aynı şekilde ayarlanır. Miras alınmadı.

Sözdizimi

P ( anahat stili: noktalı; ana hat genişliği: 5 piksel; )

CSS3 çerçevesi izin veren özelliklerle eleman sınırlarının biçimlendirme yeteneklerini genişletir. yuvarlak köşeler eleman ve ayrıca kullanın Görüntüler bir öğenin sınırlarını biçimlendirmek için.

Yuvarlatılmış köşeler ve resim çerçeveleri

1. Kenarlık yarıçaplı köşeleri yuvarlama

Tarayıcı Desteği

IE: 9.0
Firefox: 4.0
Krom: 4.0
safari: 5.0, 3.1 -webkit-
opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Tarayıcı: 4.1
Android için Chrome: 44

Bu özellik, satır içi ve blok öğelerinin köşelerini yuvarlamanıza olanak tanır. Her köşe için eğri, şeklini tanımlayan bir veya iki yarıçap ile tanımlanır - daire veya elips. Yarıçap tüm arka plana uzanır, elemanın kenarlığı olmasa bile, kesenin tam konumu background-clip özelliği kullanılarak belirlenir.

border-radius özelliği, border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left- özelliklerini kullanarak tüm köşeleri aynı anda yuvarlamanızı sağlar. yarıçapı her köşeyi ayrı ayrı yuvarlayabilirsiniz.

border-radius özelliği için iki değer ayarlarsanız, ilk değer yuvarlanır Sol üst ve sag alt köşe, ve ikincisi sağ üst ve sol alt.

/tanımla verilen değerler yatay ve dikey yarıçap. Mülkiyet miras alınmaz.

Seçenekler

Div (genişlik: 100 piksel; yükseklik: 100 piksel; kenarlık: 5 piksel katı;) .r1 (sınır yarıçapı: 0 0 20 piksel 20 piksel;) .r2 (sınır yarıçapı: 0 10 piksel 20 piksel;) .r3 (sınır yarıçapı: 10 piksel 20 piksel ;) .r4 (sınır yarıçapı: 10px/20px;) .r5 (sınır yarıçapı: 5px 10px 15px 30px/30px 15px 10px 5px;) .r6 (sınır yarıçapı: 10px 20px 30px 40px/30px;) .r7 ( sınır yarıçapı: %50;) .r8 (sınır-üst: yok; kenar-alt: yok; sınır yarıçapı: 30px/90px;) .r9 (sınır-alt-sol-yarıçap: 100px;) .r10 (sınır -yarıçap: 0 %100;) .r11 (sınır-yarıçap: 0 %50 %50 %50;) .r12 (sınır-üst-sol-yarıçap: %100 20px; kenar-alt-sağ-yarıçap: %100 20px ;)
Pirinç. 1. Bloğun köşelerini yuvarlamak için farklı seçeneklere örnekler

2. sınır-görüntü

Tarayıcı Desteği

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Krom: 16.0, 7.0 -webkit-
safari: 6.0, 3.0 -webkit-
opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8-o-
Android Tarayıcı: 4.4, 4.1 -webkit-
Android için Chrome: 42

Özellik, bir öğenin kenarlığı olarak bir görüntü ayarlamanıza olanak tanır. Görüntü için temel gereksinim, simetrik olması gerektiğidir. Özellik aşağıdaki değerleri içerir: (border-image: genişlik kaynak dilim tekrar başlangıcı;) .

Bu kadar basit bir görüntü kullanarak, bir öğe için bu sınırları elde edebilirsiniz.

/* Örnek 1 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: streç; ) /* Örnek 2 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); border-image-dili: 30; border-image-repeat: round; )
Pirinç. 2. Bir görüntü kullanarak blok kenarlıkları tasarlama örneği

A - B - C - D dilimleri çerçevenin köşelerini oluşturur ve görüntünün aralarında kalan kısmı border-image-repeat özelliğinin değerine göre çerçevenin kalan alanını doldurur. Köşe parçasının boyutu (bu örnekte 30 sayısı), border-image-slice özelliğinin değeri kullanılarak ayarlanır.

2.1. kenarlık-görüntü genişliği

Özellik, öğenin kenarlığı için görüntü genişliğini ayarlar. Genişlik belirtilmemişse, varsayılan olarak 1 olur.

kenarlık-görüntü genişliği
Değerler:
uzunluk	Çerçevenin genişliğini uzunluk - px / em cinsinden ayarlar. Aynı anda birden dört değere kadar ayarlayabilirsiniz. Bir değer verilirse, çerçevenin tüm kenarlarının genişliği aynıdır, iki değer üst-alt ve sağ-sol genişliğini vb. belirtir.
sayı	Border-width değerinin çarpıldığı sayısal değer.
%	Elemanın çerçevesinin genişliği, görüntünün boyutuna göre hesaplanır. Genişliğe göre yatay, yüksekliğe göre dikey.
Oto	Border-image-slice değerine karşılık gelir.
ilk
miras

Sözdizimi

Div (kenarlık-görüntü genişliği: 30 piksel;) 3. Farklı değer türlerini kullanarak bir görüntü çerçevesinin genişliğini ayarlama örneği

2.2. sınır-görüntü-kaynak

Özellik, bloğun sınırlarını süslemek için kullanılacak görüntünün yolunu belirtir.

Sözdizimi

Div (border-image-source: url(border.png);)

2.3. kenarlık-görüntü-dilim öğeleri

Özellik, öğenin sınırlarını süslemek için kullanılan görüntünün parçalarının boyutunu belirler ve görüntüyü dokuz parçaya böler: dört köşe, köşeler arasında dört kenar ve bir orta kısım.

Değerler:
sayı	Çerçeve parçaları bir, iki, üç veya dört değer kullanılarak boyutlandırılabilir. Bir değer, öğenin her bir tarafı için aynı boyuttaki kenarlıkları ayarlar. İki değer: ilki üst ve alt sınırların boyutunu belirler, ikincisi - sağ ve sol. Üç değer: ilki üst sınırın boyutunu, ikincisi - sağ ve sol ve üçüncüsü - alt sınırı belirler. Dört değer: Üst, sağ, alt ve sol kenarlıkların boyutunu belirtir. Sayısal değer, px sayısını temsil eder.
%	Kenarlık boyutları, görüntü boyutuna göre hesaplanır. Genişliğe göre yatay, yüksekliğe göre dikey.
doldurmak	Değer, bir sayı veya yüzde değeri ile birlikte belirtilir. Ayarlanırsa, görüntü çerçevenin iç kenarından kırpılmaz, aynı zamanda çerçevenin içindeki alanı da doldurur.
ilk	Bu özelliği varsayılan değerine ayarlar.
miras	Bu özelliğin değerini üst öğeden devralır.

Sözdizimi

Div (kenarlık-görüntü-dilim: 50 20;)
Pirinç. 4. Görüntü çerçevesi dilimlerinin ayarlanmasına bir örnek

2.4. kenarlık-görüntü-tekrar

Özellik, arka plan görüntüsünün çerçevenin köşeleri arasındaki boşluğu nasıl dolduracağını kontrol eder. Tek bir değerle veya bir çift değerle ayarlanabilir.

Sözdizimi

Div (kenarlık-görüntü-tekrar: tekrar;) 5. Farklı türde değerler kullanarak bir görüntü çerçevesinin orta kısmını yineleme örneği

2.5. sınır-görüntü-başlangıç

Özellik, görüntü çerçevesini belirtilen uzunlukta öğenin sınırlarının dışına taşımanıza olanak tanır. Bir veya dört değer kullanılarak ayarlanabilir.

Sözdizimi

Div (kenarlık-görüntü-başlangıç: 10px;)
Pirinç. 6. Farklı değer türleri kullanarak çerçeve görüntüsünü kaydırma örneği

3. Dış çerçeve ofseti anahat-offset

Özellik, öğenin sınırı ile anahat özelliği ile oluşturulan dış kenarlık arasındaki mesafeyi belirtir.

/*Şekil 1:*/ img ( kenarlık: 1px düz pembe; anahat: 1px kesikli gri; anahat-öteleme: 3px; ) /*Şekil 2:*/ img ( border-width: 1px 10px; border-style: düz; border-color: pembe; anahat: 1 piksel kesikli gri; anahat-kaydırma: 3 piksel; ) /*Şekil 3:*/ img ( kenarlık: 3 piksel iç pembe; anahat: 1 piksel kesikli gri; anahat-kaydırma: 1 piksel; )
Pirinç. 7. Bir görüntüyü dış çerçeve ile dekore etme örneği

4. Degrade çerçeve

Border-image değeri sadece bir görüntü değil, aynı zamanda bir gradyan dolgusu da olabilir.

yarı saydam çerçeve

Renklerden biri şeffaftır. Bu şekilde, bir elemanın tüm kenarları için bir kerede veya her bir kenar için ayrı ayrı kenarlıklar ayarlayabilirsiniz. Sınır genişliği, border-width özelliği tarafından kontrol edilir.

* (kutu boyutlandırma:border-box;) .wrap ( yükseklik: 200 piksel; dolgu: 25 piksel; arka plan: #00E4F6; ) .gradient ( yükseklik: 150 piksel; genişlik: %50; kenar boşluğu: 0 otomatik; kenarlık: 10 piksel katı şeffaf ; border-image: lineer-gradyan(sağa, şeffaf %0, #ADF2F7 %100); border-image-dilimi: 1; )

Posta zarfı

* (kutu-boyutlandırma:border-box;) .wrap ( yükseklik: 200 piksel; dolgu: 25 piksel; ) .gradient ( yükseklik: 150 piksel; genişlik: %50; kenar boşluğu: 0 otomatik; kenarlık: 10 piksel katı şeffaf; kenarlık resmi: 10 yinelenen doğrusal gradyan(45deg, #A7CECC, #A7CECC 10px, şeffaf 10px, şeffaf 20px, #F8463F 20px, #F8463F 30px, şeffaf 30px, şeffaf 40px); )

Bu özellik, bir öğenin etrafında bir kenarlık oluşturur. Bu mülk hakkında daha fazla bilgiyi bağlantıdan okuyabilirsiniz ve bu makalede nasıl çalıştığını genel olarak anlatacağım. Bu bilgiler CSS ile nasıl sınır yapılacağını anlamak için yeterli olacaktır.

border özelliğinin sözdizimi basittir: border: 1px düz siyah; . Bu özelliğin üç değeri vardır:

• 1px - kenarlık kalınlığı.
• düz - çerçeve tipi, düz - düz çizgi, çift - çift düz, kesikli - noktalı çizgi. Daha birçok kenarlık türü vardır, bunlarla ilgili bilgileri burada bulabilirsiniz: CSS border .
• siyah - kenarlığın rengini ayarlar. Renkler isme göre ayarlanabilir, geçerli değerler burada: CSS renk tablosu veya onaltılık kod ile. Bunun nasıl yapılacağı makalesinde yazılmıştır: CSS'de Renkler.

CSS metin çerçevesi

Bir piksel genişliğinde ve siyah olan bir kenarlık oluşturmak için border özelliğinin kullanılmasına bir örnek:

Bu paragrafa example-1 sınıfı atanmıştır.

Bu örnekte, CSS padding özelliğini veya padding'i de kullandık. Bu özellik, metinden kontura (öğe sınırı) kadar olan girintinin boyutunu ayarlar.

Basitçe anlamak için başka bir basit örneğe bakalım. Üç piksel genişliğinde, kırmızı ve dolgusuz (CSS padding özelliği) bir kenarlık oluşturalım.

Bu paragrafa örnek-2 sınıfı verilmiştir.

Gördüğümüz gibi, dolgu olmadan metin çerçevesi azgın görünüyor.

CSS'de bir resim nasıl çerçevelenir

Resim çerçeveleri, border özelliği kullanılarak aynı şekilde ayarlanır. Resim için 4px yeşil kenarlık yapalım.

Örnek-img ( kenarlık: 4 piksel düz yeşil; )

Bu kodun nasıl çalışacağı aşağıda açıklanmıştır:

CSS'de kenarlık köşeleri nasıl yuvarlanır

CSS'de kenar köşeleri yuvarlama border-radius özelliği ile yapılır. Bu özellik CSS3'te tanıtıldı ve tüm modern tarayıcılarda çalışıyor.

border-radius özelliği bir ila dört değere sahip olabilir. Değer bir ise, tüm köşeler için yuvarlama derecesini ayarlar. Tek değere sahip bu özelliğin nasıl çalışacağına dair bir örnek verelim.

Örnek-3 ( kenarlık: 1 piksel düz siyah; kenarlık yarıçapı: 15 piksel; dolgu: 10 piksel; )

İşte nasıl çalıştığı:

sınır yarıçapı özelliği: 15 piksel.>

Blokta kenarlık yoksa border-width vardır: 0; , ardından arka plan rengiyle dolu alan yuvarlanır (arka plan rengi özelliği). İşte bir örnek:

Örnek-4 ( border-width: 0; // bu değer varsayılan olarak 0 olmasına rağmen background-color: #DDD; border-radius: 15px; padding: 10px; )

Bu örneğin nasıl çalıştığı aşağıda açıklanmıştır:

sınır yarıçapı özelliği: 15 piksel.>

Daha önce yazdığım gibi, border-radius özelliği bir ila dört değer arasında ayarlanabilir. Aşağıdaki tablo, tüm değer kombinasyonlarının nasıl çalışacağını açıklamaktadır.

Border-radius özelliği için değerler yüzde olarak belirtilebilir.

CSS'de bir daire çizelim. Bunu yapmak için 100 x 100 piksellik bir kare blok alın ve köşeleri CSS kuralı border-radius: 50% ile yuvarlayın.

Örnek-5 ( genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: #F00; kenarlık yarıçapı: %50; )

Bu örneğin nasıl çalıştığı aşağıda açıklanmıştır:

Bu konuda "CSS'deki çerçeveler" tamamen açıklanmıştır. CSS öğrenmede iyi şanslar!

İyi günler. Alexey Gulynin temas halinde. Son makalede, CSS'de metne nasıl stil uygulanacağını öğrendiniz. Bu yazıda ne olduğunu açıklamak istiyorum. css sınırları ve bunların nasıl kullanılacağı. Kenarlık kuralları üç öğeden oluşur: kenarlık kalınlığı, stil ve renk. Aşağıdaki içeriğe sahip bir index.html dosyası oluşturalım:

Aynı sayfada, id = tester olan blok için stilleri ayarlayın (aşağıdaki satırları sayfa başlığının içine ekleyin):

border-width özelliği çerçevenin genişliğinden, border-style özelliği çerçevenin stilinden ve border-color çerçevenin renginden sorumludur. Birinci ve üçüncü özelliklerle her şey açıktır. Border-style özelliğinin alabileceği tüm değerler aşağıdaki şekilde gösterilmiştir:

Şimdi sayfamızı tarayıcıda açarsak, bloğun etrafında 1 piksel genişliğinde kırmızı düz bir kenarlığın belirdiğini göreceğiz.

Size uzun CSS sınır girişini gösterdim (bu giriş çok hantaldır ve genellikle kimse kullanmaz). Tüm talimatlar tek bir satıra sığabilir. Bizim durumumuzda, şöyle görünecek:

Kenarlık:1px düz kırmızı;

Şunlar. Önce çerçeve kalınlığını, ardından çerçeve stilini ve rengini belirliyoruz.

Muhtemelen çerçevenin dört tarafında da göründüğünü fark etmişsinizdir. Çerçeveler, herhangi bir kenar için ayrı ayrı ayarlanabilir (belirli bir örnekte açık olacaktır):

Kenarlık üstü: 2 piksel düz kırmızı; kenarlık-alt: 3 piksel noktalı yeşil; sol kenarlık: 6px kesikli sarı; sağ kenarlık: 5px çift #fe54e5;

4 tarafının da farklı çerçevelere sahip olduğunu görebilirsiniz. Bazı taraflar için bir çerçeve ayarlamazsanız, buna göre orada çerçeve olmayacaktır.

Çerçeveler kesinlikle her yerde kullanılır: Çerçeve kullanmayan bir web sitesi tasarımı bulmak neredeyse zordur. Çoğu zaman, menü öğeleri, yalnızca border-right veya border-left özelliğiyle belirlenen dikey bir çizgiyle ayrılır. Bağlantılar üzerinde ilginç efektler de yapabilirsiniz. Sadece bu konuyla ilgili ödev:

Bir sayfa oluşturmanız ve üzerine 2 bağlantı yerleştirmeniz gerekir. Bu bağlantıların stili: düz bir çizgi, bu çizginin üzerine gelindiğinde noktalı bir çizgi haline gelmelidir.

Hangi öğenin nerede olduğunu daha iyi anlamak için sayfayı düzenlerken öğeler için kenarlıklar kullanmak da çok iyidir. En azından dizgi yapmak benim için çok daha açık ve anlaşılır.

CSS border özelliği, bir nesnenin kenarlığını, yani kenarlığın kalınlığını, rengini ve stilini oluşturmak üzere ayarlanır. Bu özellik HTML'de yaygın olarak kullanılmaktadır. Sayfadaki içeriğin daha iyi algılanması için çeşitli efektler oluşturabilirsiniz. Örneğin, bir kenar çubuğu, site başlığı, menü vb. tasarlayın.

1. CSS sınır sözdizimi

sınır : kenarlık genişliği kenarlık stili kenarlık rengi | miras;

• sınır genişliği - sınır genişliği. Piksel (px) olarak ayarlayabilir veya ince, orta, kalın standart değerleri kullanabilirsiniz (yalnızca piksel genişliğinde farklılık gösterirler)
• border-style - oluşturulan çerçevenin stili. Aşağıdaki değerleri alabilir
  • yok veya gizli - sınırı iptal eder
  • noktalı - noktalı çerçeve
  • çizgili - çizgi çerçevesi
  • düz - basit çizgi (en sık kullanılan)
  • çift ​​- çift çerçeve
  • oluk - oluklu 3B kenarlık
  • sırt , iç kısım , başlangıç ​​- çeşitli 3D çerçeve efektleri
  • devral - ana öğenin değeri uygulanır
• border-color - sınırın rengi. Belirli bir renk adı kullanılarak veya RGB biçiminde belirtilebilir (site için html renk adlarına bakın)

Not

CSS border özelliğindeki değerler herhangi bir sırada ayarlanabilir. En sık kullanılan sıralama "kalınlık stili rengidir".

2. Farklı CSS kenarlıklarına sahip örnekler

2.1. Örnek. Farklı kenarlık stili kenarlık stilleri

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "