ვლად მერჟევიჩი

თან CSS-ის გამოყენებითთქვენ შეგიძლიათ დაამატოთ საზღვრები ელემენტს რამდენიმე გზით. ძირითადად, რა თქმა უნდა, გამოიყენება სასაზღვრო საკუთრება, როგორც ყველაზე უნივერსალური, ასევე მონახაზი და, გასაკვირი, ყუთი-ჩრდილი, რომლის მთავარი ამოცანაა ჩრდილის შექმნა. შემდეგი, ჩვენ განვიხილავთ ამ მეთოდებს და მათ განსხვავებებს.

გამოიკვეთოს ქონება

უმარტივესი თვისება ჩარჩოების შესაქმნელად. მას აქვს იგივე პარამეტრები, როგორც საზღვარი, მაგრამ მნიშვნელოვნად განსხვავდება ზოგიერთ დეტალში:

• მონახაზი ნაჩვენებია ელემენტის გარშემო (საზღვრები შიგნით);
• მონახაზი არ ახდენს გავლენას ელემენტის ზომებზე (საზღვარი ემატება ელემენტის სიგანეს და სიმაღლეს);
• კონტურის დაყენება შესაძლებელია მხოლოდ მთელი ელემენტის გარშემო, მაგრამ არა ცალკეულ მხარეებზე (საზღვრის გამოყენება შესაძლებელია ნებისმიერი მხარისთვის ან ერთდროულად);
• კონტურზე გავლენას არ ახდენს საზღვრის რადიუსის თვისებით განსაზღვრული ფილე რადიუსი (საზღვარი ზემოქმედებას ახდენს).

იბადება კითხვა - რა შემთხვევაშია საჭირო მონახაზი, როცა მის როლს, მიუხედავად ჩამოთვლილი განსხვავებებისა, მთლიანად საზღვარი აკისრია? ბევრი სიტუაცია არ არის, მაგრამ ისინი ხდება:

• რთული მრავალფეროვანი ჩარჩოების შექმნა;
• ელემენტს კადრის დამატება, როცა მაუსის ზედ ატარებთ;
• იმ საზღვრის დამალვა, რომელსაც ბრაუზერი ავტომატურად ამატებს ზოგიერთ ელემენტს ფოკუსის მიღებისას;
• მონახაზისთვის, შეგიძლიათ დააყენოთ მანძილი ელემენტის კიდიდან ჩარჩომდე კონტურის-ოფსეტური თვისების გამოყენებით, შექმნათ .

მრავალ ფერადი ჩარჩოები

თქვენ უნდა გესმოდეთ, რომ მონახაზი არანაირად არ ანაცვლებს საზღვარს და ადვილად შეიძლება არსებობდეს მასთან ერთად, როგორც ეს ნაჩვენებია მაგალით 1-ში.

მაგალითი 1: ჩარჩოს შექმნა

IN ამ მაგალითშიელემენტის ირგვლივ ემატება შავი ჩარჩო, რომელიც გამოყოფილია ფონიდან თეთრი საზღვრით (ნახ. 1).

ბრინჯი. 1. ჩარჩო ელემენტის გარშემო

ჩარჩო გამოყენებისას: hover

საზღვრის მეშვეობით ჩარჩოს დამატებისას ელემენტის სიგანე იზრდება, რაც საკმაოდ შესამჩნევია საზღვრისა და :hover ფსევდოკლასის შერწყმისას. ამის "გამარჯვების" ორი გზა არსებობს. უმარტივესი რამ არის საზღვრის შეცვლა მონახაზით, რაც, როგორც ვიცით, არ მოქმედებს ელემენტის ზომაზე (მაგალითი 2).

მაგალითი 2: ჩარჩო ჰოვერზე

მონახაზი ყოველთვის არ არის შესაფერისი, თუ მხოლოდ იმიტომ, რომ კუთხეების დამრგვალება მასზე გავლენას არ ახდენს. აქ შესაფერისია მეორე მეთოდი - დაამატეთ უხილავი ჩარჩო ან ჩარჩო, რომელიც ემთხვევა ფონის ფერს და შემდეგ შეცვალეთ მისი პარამეტრები ჰოვერირებისას (მაგალითი 3). მაშინ ელემენტის გადაადგილება არ მოხდება, რადგან ჩარჩო თავდაპირველად უკვე არსებობს. მაგრამ ჩვენ ყოველთვის გვახსოვს, რომ ელემენტის სიგანე არის სიგანის მნიშვნელობების ჯამი, საზღვარი მარცხნივ და საზღვარი მარჯვნივ. ანალოგიური სიტუაციაა სიმაღლეზე.

მაგალითი 3: ჩარჩო ჰოვერზე

შემოხაზეთ ფორმის ველები

ზოგიერთ ბრაუზერში (Chrome, Safari, უახლესი ვერსიები Opera) ფორმის ველების ირგვლივ გამოსახულია პატარა ფერადი ჩარჩო, როდესაც ისინი იღებენ ფოკუსს (ნახ. 2). მის ამოსაღებად, უბრალოდ დაამატეთ მნიშვნელობა none სტილში მონახაზის თვისებას, როგორც ეს ნაჩვენებია მაგალითში 4.

ბრინჯი. 2. ჩარჩო მინდვრების გარშემო

მაგალითი 4. ჩარჩოს მოხსნა

ჩარჩოები ყუთი-ჩრდილის მეშვეობით

მიუხედავად იმისა, რომ box-shadow თვისება გამიზნულია ელემენტის ირგვლივ ჩრდილის დასამატებლად, ის ასევე შეიძლება გამოყენებულ იქნას საზღვრების შესაქმნელად, რომელთა შექმნა შეუძლებელია საზღვრის ან მონახაზის გამოყენებით. ეს ყველაფერი იმის წყალობით, რომ ჩრდილების რაოდენობა შეიძლება იყოს შეუზღუდავი, რომელთა პარამეტრები ჩამოთვლილია მძიმეებით გამოყოფილი.

ჩარჩოს მისაღებად, პირველი სამი პარამეტრი უნდა იყოს ნულოვანი, ისინი პასუხისმგებელნი არიან ჩრდილის პოზიციაზე და მის დაბინდვაზე. მეოთხე პარამეტრი ამ შემთხვევაში პასუხისმგებელია საზღვრის სისქეზე, ხოლო მეხუთე ადგენს საზღვრის ფერს. მეორე ჩარჩოსთვის, მეოთხე პარამეტრი უდრის ორი ჩარჩოს სისქის ჯამს.

მაგალითი 4 გვიჩვენებს, თუ როგორ უნდა დაამატოთ ორი ჩარჩო და ერთი საზღვარი მარჯვნივ ერთი box-shadow თვისების გამოყენებით.

მაგალითი 4: ყუთი-ჩრდილის გამოყენება

ამ მაგალითის შედეგი ნაჩვენებია ნახ. 3.

ბრინჯი. 3. box-shadow თვისებით შექმნილი ჩარჩოები

CSS border თვისება გამოიყენება ობიექტის საზღვრის შესაქმნელად, კერძოდ, საზღვრის სისქე, მისი ფერი და სტილი. ეს თვისება ფართოდ გამოიყენება HTML-ში. თქვენ შეგიძლიათ შექმნათ სხვადასხვა ეფექტები, რათა უკეთ აღიქვათ გვერდის შინაარსი. მაგალითად, შეიმუშავეთ გვერდითი ზოლი, ვებსაიტის სათაური, მენიუ და ა.შ.

1. CSS საზღვრის სინტაქსი

საზღვარი: საზღვრის სიგანის საზღვრის სტილის საზღვრის ფერი | მემკვიდრეობით;

• საზღვარი-სიგანე - საზღვრის სისქე. თქვენ შეგიძლიათ დააყენოთ იგი პიქსელებში (px) ან გამოიყენოთ სტანდარტული მნიშვნელობები თხელი, საშუალო, სქელი (ისინი განსხვავდებიან მხოლოდ პიქსელებში სიგანეში)
• border-style - ნაჩვენები საზღვრის სტილი. შეუძლია მიიღოს შემდეგი მნიშვნელობები
  • არცერთი ან დამალული - აუქმებს საზღვარს
  • წერტილოვანი - წერტილოვანი ჩარჩო
  • წყვეტილი - ტირეებისგან დამზადებული ჩარჩო
  • მყარი - მარტივი ხაზი (ყველაზე ხშირად გამოიყენება)
  • ორმაგი - ორმაგი ჩარჩო
  • ღარი - ღარებიანი 3D საზღვარი
  • ქედი, ჩასმა, დასაწყისი - სხვადასხვა 3D კადრის ეფექტები
  • მემკვიდრეობა - გამოიყენება ძირითადი ელემენტის მნიშვნელობა
• border-color - საზღვრის ფერი. შეიძლება მითითებული იყოს კონკრეტული ფერის სახელის გამოყენებით ან RGB ფორმატში (იხილეთ html ფერის სახელები საიტისთვის)

CSS საზღვრის თვისებაში მნიშვნელობები შეიძლება დაყენდეს ნებისმიერი თანმიმდევრობით. ყველაზე ხშირად გამოყენებული თანმიმდევრობა არის "სისქის სტილის ფერი".

2. მაგალითები სხვადასხვა CSS საზღვრებით

2.1. მაგალითი. საზღვრების დიზაინის სხვადასხვა სტილის საზღვრების სტილი

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 "

Описание

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .

Синтаксис

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

ეს მაგალითი ამატებს ორმაგ საზღვარს ფენის გარშემო. შედეგი ნაჩვენებია ნახ. 2.

ბრინჯი. 2. სასაზღვრო ქონების გამოყენება

ობიექტის მოდელი

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

ბრაუზერები

ბრაუზერი Internet Explorerმეექვსე ვერსიის ჩათვლით, საზღვრის სისქით 1 პიქსელი, ის აჩვენებს წერტილებს, როგორც წყვეტილს. 2px და მეტი სისქით, წერტილოვანი მნიშვნელობა მუშაობს სწორად. ეს შეცდომა დაფიქსირდა IE7-ში, მაგრამ მხოლოდ ყველა 1px საზღვრებისთვის. თუ ბლოკის ერთ-ერთ საზღვრებს აქვს სისქე 2 პიქსელი ან მეტი, მაშინ IE7-ში წერტილოვანი მნიშვნელობა იქცევა წყვეტილად.

Internet Explorer 7.0-მდე და მათ შორის ვერსიები არ უჭერს მხარს მემკვიდრეობის მნიშვნელობას.

საზღვრის სტილი შეიძლება ოდნავ განსხვავდებოდეს ბრაუზერებს შორის, როდესაც იყენებთ groove , ridge , inset , ან outset მნიშვნელობებს.

CSS3 box-shadow თვისების ერთ-ერთი სახალისო აპლიკაციაა ელემენტის გარშემო ორმაგი საზღვრის შექმნა. ძალიან საინტერესო ეფექტიგვერდის დიზაინისთვის, მაგრამ ის იმუშავებს მხოლოდ ბრაუზერების ახალ ვერსიებში, რომლებიც მხარს უჭერენ box-shadow .

თუმცა, არსებობს კიდევ რამდენიმე მეთოდი ამ ეფექტის შესაქმნელად. უფრო მეტიც, აშკარა გამოყენება ფონის სურათიძალიან შორს არის იდეალურისგან.

ეს სახელმძღვანელო წარმოგიდგენთ ხუთ მეთოდს ელემენტის გარშემო ორმაგი საზღვრის შესაქმნელად. უფრო მეტიც, მხოლოდ ერთ მათგანს სჭირდება სურათი, ხოლო დანარჩენი ყველა იყენებს სუფთა CSS კოდს ბრაუზერის შესანიშნავი მხარდაჭერით.

მეთოდი 1: საზღვარი და მონახაზი

ეს მეთოდი მუშაობს მხოლოდ ბრაუზერებში, რომლებიც მხარს უჭერენ კონტურის თვისებას (ყველა გარდა IE6/7). ელემენტს ამატებთ როგორც საზღვრის, ისე კონტურის თვისებებს.

ერთი (კონტური: მყარი 6px #fff; მონახაზი: მყარი 6px #888; )

ამ მეთოდის მუშაობის მიზეზი არის ის, რომ მონახაზი ყოველთვის ჩნდება მართკუთხედის გარედან. კონტურის თვისების პრობლემა ჩნდება მცურავი ელემენტების გამოყენებისას, რადგან საზღვარი გადაფარავს მიმდებარე ელემენტებს.

მეთოდი 2: ფსევდო ელემენტი

ეს მეთოდი მოითხოვს ჩარჩოს აბსოლუტურ განლაგებას:

ორი ( კონტური: მყარი 6px #fff; პოზიცია: ფარდობითი; z-ინდექსი: 1; ) .ორი: ადრე ( შინაარსი: ""; ჩვენება: ბლოკი; პოზიცია: აბსოლუტური; ზედა: -12 პიქს; მარცხნივ: -12 პიქსელი; კონტური: მყარი 6px #888;

ძირითადი პუნქტებია z-index თვისების დაყენება (ისე, რომ ფსევდო ელემენტი გადაფარავს შინაარსს), პოზიციონირება და მინ-სიმაღლის მნიშვნელობა. ეს უკანასკნელი თვისება ინარჩუნებს ჩარჩოს ელასტიურობას.

მეთოდი 3: ჩრდილი

საუკეთესო მეთოდი, რადგან მას მხოლოდ კოდის ერთი ხაზი სჭირდება box-shadow თვისების დასაყენებლად.

სამი ( box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888; )

ორმაგი ჩარჩოს გამოსაჩენად გამოიყენება ორი ჩრდილი. ისინი გამოყოფილია მძიმეებით. დაბინდვა დაყენებულია 0-ზე. ვინაიდან მეორე ჩრდილი გადაფარავს პირველს, მას აქვს ორჯერ სიგანე. მთავარია გაუმჭვირვალე ფერების გამოყენება, რაც ქმნის მკაფიო საზღვრებს ჩარჩოებს შორის.

კონტურის თვისების მსგავსად, box-shadow არ ახდენს გავლენას მიმდებარე ელემენტებზე და შეიძლება გადაფაროს ისინი. ამიტომ, თქვენ უნდა დააყენოთ ველი ფორმირებისთვის გარეგნობაკომპოზიციები.

ბუნებრივია, box-shadow საკუთრების მხარდაჭერა შემოიფარგლება უფრო ახალი ბრაუზერებით.

მეთოდი 4: დამატებითი div ელემენტი

IN ამ მეთოდითგამოყენებულია გარე ელემენტი