Çeşitli güzellikler yaratılıncaya kadar bu güzelliklerin ilki çerçeve olacaktır.

Yeni başlayanlar için en basit çerçevelere bakalım. CSS oluşturmaları için, aşağıdaki değerlere ayarlanabilen kenarlığın yetkisi kullanılır:

sağlam – sağlam çerçeve;

kesikli – noktalı çerçeve;

noktalı – noktalı çerçeve;

çift ​​– alt çizginin çerçevesi;

oluk – gölgeden yapılmış çerçeve;

sırt – kabartmalı;

Basit çerçevelerin oluşturulması için iki yetki daha gereklidir - bu

genişlik – çerçeve tovshchina;

renk – çerçeve rengi;

Kısaltma tekniği kullanmak, değerleri bir satırda boşluk bırakarak yazmak daha iyidir.

P(
kenarlık: 2 piksel katı #ffff00;
}

dolgu - dahili (uzaya çerçeve girişi);

kenar boşluğu - Dış (çerçeve harici nesnelere maruz kalır);

Girişler için de yönler (hangi taraftan kaç tarafa girileceği) belirtilir. Çerçeveyi merkeze değil, çerçevenin kendisini herhangi bir yer değiştirmeyle yerleştirmeye ihtiyaç duyulursa bu güç duracaktır.

üst – canavara erişim;

sağ - sağa giriş;

alt - aşağıdan erişim;

sol – sol elle erişim

Bu makamların değerleri kısaltılmış haliyle tek tek yazılarak (padding: 10px 30px 15px 20px) önce en üstteki değerler, ardından yıl okunu takip edecek şekilde diğerleri yerleştirilir.

Eğer tek bir değer koyarsanız her iki taraftan erişim aynı olacak demektir.

P(
kenarlık: 2 piksel katı #ffff00;

kenar boşluğu: 20 piksel;
}

Metni veya görselleri çerçevenin ortasına yerleştirmeniz gerekiyorsa, “p” seçiciye text-align: center'ı;

Yüksekliğin nasıl ayarlandığına bir göz atalım çerçeve genişliği. Çerçevenin yüksekliği tarayıcı tarafından otomatik olarak ayarlanır ve giriş görevlerinin sırasına göre alana sığacak şekilde seçilir. Ve arkanızdaki eksenin genişliği bağımsız olarak ayarlanabilir.

Genişlik güce ayarlanır ve değer, İnternet'ten alınan diğer girişlerin yanı sıra piksel cinsinden istenen boyutu gösterir.

P(
kenarlık: 2 piksel katı #ffff00;
dolgu: 10 piksel 20 piksel 10 piksel 20 piksel;
kenar boşluğu: 20 piksel;
genişlik: 400 piksel;
}

Konuşmadan önce, belirli bir genişlikte tarayıcının yalnızca genişliği anladığını unutmayın. Daha sonra bu değere çerçevenin belirtilen girişi ve kalınlığı eklenir ve kalan boyut kenarı temsil eder.

Yapılması gereken tek şey çerçeveyi yan tarafa yerleştirmektir. Zaten bariz olan güç marjının yardımı için savaşmak.

Çerçeve bloğunu yalnızca sayfanın ortasına taşımanız gerekiyorsa, kenar boşluğu değeri otomatik olarak ayarlanır.

P(
kenarlık: 2 piksel katı #ffff00;
dolgu: 10 piksel 20 piksel 10 piksel 20 piksel;
kenar boşluğu: 20 piksel otomatik;
genişlik: 400 piksel;
}

İlk örnekte, bir html belgesi oluşturuyoruz ve gövde bloğu (belgenin gövdesi) ve bir paragraf için katı bir çerçeve oluşturuyoruz.

Diğer tarafta CSS değiştirilecektir (stil etiketine yerleştirilenler).

Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.

Результат:

Следующая рамка dashed (пунктир).

p{
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Результат:

Рамка dotted :

p {
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка double :

p {
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка groove :

p {
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка ridge :

p {
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для этого уберём border , и добавим border-radius и box-shadow .

p {
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.

p {
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Сделаем разноцветную рамку. Для этого в свойство box-shadow , через запятую, добавим ещё несколько комплектов значений с разными цветами.

p {
border-radius : 10px ;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p {
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding : 40px ;
margin : 20px auto ;
width : 130px ;
height : 130px ;
text-align : center;
}

Влад Мержевич

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента (border внутри);
• outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

• создание сложных разноцветных рамок;
• добавление рамки к элементу при наведении на него курсора мыши;
• сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
• для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания .

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

Пример 1. Создание рамки

Bu durumda, elemanın yanında, arka plana karşı beyaz bir kenarlıkla (küçük 1) güçlendirilmiş siyah bir çerçeve vardır.

Pirinç. 1. Elemanın etrafındaki çerçeve

Vikoristan saatinin altındaki çerçeve:hover

Kenarlık boyunca bir çerçeve eklerken, öğenin genişliğinde bir artış yaratılır; bu, bir kenarlık ve sözde sınıf: vurgulu eklenirken fark edilir. Bunu aşmanın iki yolu var. En basit şey, kenarlığı, bildiğimiz gibi öğenin boyutunu etkilemeyen anahatla değiştirmektir (örnek 2).

Alın 2. İşaretleme saatinin altındaki çerçeve

Yuvarlatılmış köşelerde bir nokta olmamasına rağmen taslak hiçbir zaman uygun olmayacaktır. Burada başka bir yöntem uygundur - görünmez bir çerçeve veya arka planın rengiyle eşleşen bir çerçeve ekleyin ve ardından gezinirken parametreleri değiştirin (örnek 3). Bu nedenle, çerçeve zaten orada olduğundan elemanın yer değiştirmesi olmayacaktır. Bir öğenin genişliğinin genişliğin toplamı olduğunu, kenarlığın sol tarafta ve kenarlığın sağ tarafta olduğunu unutmayın. Yükseklik konusunda da durum aynıdır.

Alın 3. İşaretleme saatinin altındaki çerçeve

Form alanlarının etrafındaki çerçeve

Bazı tarayıcılarda (Chrome, Safari, Opera'nın diğer sürümleri), odak bırakıldığında form alanlarının yanında küçük renkli bir çerçeve (küçük 2) görüntülenir. Bunu yapmak için, Ek 4'te gösterildiği gibi güç anahattı değerini none'a eklemek yeterlidir.

Pirinç. 2. Kenarların etrafındaki çerçeve

Popo 4. Çerçevenin alınması

Kutu gölgesi aracılığıyla çerçeveler

Her ne kadar kutu gölgesinin gücü bir öğenin etrafına gölge eklemek için kullanılsa da, kenarlık veya taslak yoluyla oluşturulamayan çerçeveler oluşturmak için de kullanılabilir. Önemli olan, gölge sayısının vazgeçilmez olabileceği ve koma sırasında onu güvenli bir şekilde oynatacak parametrelerin olabileceğidir.

Çerçeveyi çıkarmak için ilk üç parametreyi sıfıra ayarlayın; bunlar tonun ve perdenin konumunu gösterir. Dördüncü parametre kenarlığın kalınlığını belirler, beşinci parametre ise çerçevenin rengini belirler. Başka bir çerçeve için dördüncü parametre, iki çerçevenin kalınlıklarının toplamına eşittir.

Ek 4, bir kutu gölge gücü yardımıyla iki karenin ve sağ elini kullananlar arasında bir karenin eklenmesini göstermektedir.

Popo 4. Vikoristannya kutu gölgesi

Bu alın okumalarının sonucu Şekil 1'de gösterilmektedir. 3.

Pirinç. 3. Güç kutusu gölgesi tarafından oluşturulan çerçeveler

CSS3 kutu gölgesine yapılan yararlı eklemelerden biri, öğenin etrafında kayan bir kenarlık oluşturulmasıdır. Bu, sayfaların tasarımı için çok yararlı bir efekttir, ancak yalnızca kutu gölgesini destekleyen tarayıcıların yeni sürümlerinde ortaya çıkacaktır.

Ancak bu etkiyi yaratmanın başka yöntemleri de vardır. Üstelik arka plan görüntüsünün bariz bozulması ideal olmaktan uzaktır.

Bu ders, bir öğenin etrafında alt çerçeve oluşturmaya yönelik beş yöntem sunar. Üstelik bunlardan yalnızca biri görselleri görüntülüyor ve tarayıcılarda özel destekle saf CSS kodu kullanmaya karar veriyor.

Yöntem 1: kenarlık ve anahat

Bu yöntem yalnızca ana hat gücünü destekleyen tarayıcılarda çalışır (IE6/7 hariç tümü). Yetkililerin sınırlarına ve dış hatlarına bir kırgınlık unsuru ekliyorsunuz.

Bir ( kenarlık: düz 6 piksel #fff; ana hat: düz 6 piksel #888; )

Bu yöntemin nedeni anahat çerçevesinin daima dikdörtgenin dışından çizilmesidir. Ana hatların netliği sorunu, yüzen öğeler bozulduğunda ve çerçevenin yüzen öğelerle üst üste gelmesine neden olduğunda ortaya çıkar.

Yöntem 2: Sözde Öğe

Bu yöntem çerçevenin mutlak konumlandırılmasına dayanır:

İki ( kenarlık: katı 6 piksel #fff; konum: göreceli; z-endeksi: 1; ) .two:before ( içerik: ""; ekran: blok; konum: mutlak; üst: -12 piksel; sol: -12 piksel; kenarlık: katı 6 piksel #888; genişlik: 312 piksel; dolgu alt: 12 piksel; minimum yükseklik: %100; z-endeksi: 10;

Anahtar noktalar, z-endeksi gücünün ayarlanması (böylece sözde öğenin alanla örtüşmesi), konumlandırma ve minimum yükseklik değerleridir. Kalan güç çerçevenin esnekliğini korur.

Yöntem 3: gölge

En kısa yoldan, kutu gölge ayarlarıyla yalnızca bir satır koda ihtiyacınız var.

Üç (kutu gölgesi: 0 0 0 6px #fff, 0 0 0 12px #888; )

Asma çerçeve oluşturmak için iki renk tonu kullanılır. Koku koma yoluyla ortaya çıkıyor. Boyut 0'a ayarlanmıştır. Birbirinin gölgesinin parçaları, iki kat genişliğe sahip olan birinciyle örtüşür. Kilit nokta, çerçeveler arasında netlik yaratan belirsiz renklerin seçimidir.

Çünkü anahat kutusu gölgesinin gücü mevcut elemanlara akmaz ve onlarla örtüşebilir. Bu nedenle kompozisyonun dış görünümünü şekillendirmek için alanı ayarlamanız gerekir.

Elbette kutu gölgesi desteği yeni tarayıcılarla sınırlıdır.

Yöntem 4: Eklenti div öğesi

Hangi yöntemin dış öğesi vardır?