ოთხი (საზღვარი: მყარი 6px # 888; ფონი: #fff; სიგანე: 312px; მინ-სიმაღლე: 312px;). ოთხი div (სიგანე: 300px; წთ-სიმაღლე: 300px; ფონი: # 222; ზღვარი: 6px ავტო; გადავსება : დამალული;)

გარე ელემენტი ოდნავ უფრო დიდია, რაც იძლევა ორმაგი საზღვრის ილუზიას.

მეთოდი 5: საზღვრის გამოსახულების თვისება

კიდევ ერთი ახალი ტექნიკა არის ხშირად შეუმჩნეველი CSS3 სასაზღვრო გამოსახულების თვისება:

ხუთი (საზღვრის სიგანე: 12px; -webkit-border-image: url (multiple-border.gif) 12 12 12 12 გამეორება; -moz-border-image: url (multiple-border.gif) 12 12 12 12 გამეორება; border-image: url (multiple-border) 12 12 12 12 გამეორება; / * ოპერასთვის * /)

სხვა მეთოდი იცი?

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

მაიკლ 2016-06-11 1 HTML და CSS 0

როგორ კეთდება ორმაგი საზღვარი css- ში?

Გამარჯობა ყველას. იცით როგორ გაორმაგდეს საზღვარი css- ში? თუ არა, გთხოვთ წაიკითხოთ ეს პატარა შენიშვნა. საქმე იმაშია, რომ ამას ვერ გააკეთებ რეგულარული საზღვრით, სხვა გზით უნდა წახვიდე.

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

ორმაგი საზღვარი ყუთ-ჩრდილით

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

Div (
ფონი: # E0D8A3;
სიგანე: 180px;
სიმაღლე: 110 პიქსელი;
ბალიში: 12px;
}

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

ყუთი-ჩრდილი: 0 0 0 1px # 000, 0 0 0 10px # E0D8A3;

ეს ასე გამოიყურება:

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

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

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

მხოლოდ ერთი წუთით თქვენი ყურადღება:ჩვენ ყველას გვსურს ჩვენი საიტების მასპინძლობა საიმედო ჰოსტინგში. მე გავაანალიზე ასობით მასპინძელი და ვიპოვე საუკეთესო - HostIQმის შესახებ ასობით დადებითი მიმოხილვაა ინტერნეტში, მომხმარებლის საშუალო რეიტინგია 4.8 -დან 5. შეიძლება თქვენი საიტები იყოს ბედნიერი.

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

ჩარჩოს სისქე

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

ჩარჩოს ფერი

საზღვრის ფერის თვისება განსაზღვრავს საზღვრის ფერს. ღირებულებები ნორმალური ფერის მნიშვნელობებია, როგორიცაა "# 123456", "rgb (123,123,123)" ან "ყვითელი".

ჩარჩოს ტიპები

არსებობს სხვადასხვა ტიპის ჩარჩოები. რვა ტიპის ჩარჩო და მათი ინტერპრეტაცია Internet Explorer 5.5 -ში ნაჩვენებია ქვემოთ. ყველა მაგალითი ნაჩვენებია "ოქროს" ფერით და "სქელი" სისქით, მაგრამ, რა თქმა უნდა, შეიძლება განსხვავებული ფერისა და სისქის ჩვენება.

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

ჩარჩოების განსაზღვრის მაგალითები

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

,

,

და

შედეგი შეიძლება არ იყოს ისეთი შთამბეჭდავი, მაგრამ აჩვენებს გარკვეულ შესაძლებლობებს:

H1 (საზღვრის სიგანე: სქელი; საზღვრის სტილი: წერტილოვანი; საზღვრის ფერი: ოქრო;) h2 (საზღვრის სიგანე: 20px; საზღვრის სტილი: დასაწყისი; საზღვრის ფერი: წითელი;) p (საზღვრის სიგანე: 1px; საზღვრის სტილი: მოწყვეტილი; საზღვრის ფერი: ლურჯი;) ul (საზღვრის სიგანე: თხელი; საზღვრის სტილი: მყარი; საზღვრის ფერი: ნარინჯისფერი;)

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

H1 (საზღვარი-ზედა-სიგანე: სქელი; საზღვარი-ზედა სტილი: მყარი; საზღვარი-ზედა-ფერი: წითელი; საზღვარი-ქვედა-სიგანე: სქელი; საზღვარი-ქვედა სტილი: მყარი; საზღვარი-ქვედა ფერი: ლურჯი; საზღვარი-მარჯვენა-სიგანე: სქელი; საზღვარი-მარჯვენა სტილი: მყარი; საზღვარი-მარჯვენა-ფერი: მწვანე; საზღვარი-მარცხენა-სიგანე: სქელი; საზღვარი-მარცხენა სტილი: მყარი; საზღვარი-მარცხენა ფერი: ნარინჯისფერი;)

შემოკლებული აღნიშვნა

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

P (საზღვრის სიგანე: 1 პიქსელი; საზღვრის სტილი: მყარი; საზღვრის ფერი: ლურჯი;)

შეიძლება გაერთიანდეს:

P (საზღვარი: 1px მყარი ლურჯი;)

Შემაჯამებელი

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

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

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

• - ხაზის სიგანე ერთი პიქსელი
• - სქელი ხაზი
• - Თეთრი ფერი
• - შავი ფერი
• - ნაცრისფერი ფერი

მყარი ელემენტის საზღვარი

დაშლილი ელემენტის საზღვარი



წერტილოვანი ელემენტის საზღვარი



ელემენტის საზღვარი ორმაგი ხაზით



საზღვრის ცალკეული მონაკვეთების საკუთრება



ჩაშენებული გოფრირებული ჩარჩო მოცულობით



ამოზნექილი გოფრირებული ჩარჩო მოცულობით



მოცულობითი დეპრესიული ჩარჩო



მოცულობითი ამოზნექილი ჩარჩო



გაკვეთილები / CSS /

გაკვეთილი 7. CSS ელემენტის ჩარჩო

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

საზღვარი

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

სასაზღვრო თვისების სინტაქსი ასეთია:

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

ჩარჩოს სისქე (სიგანე) უნდა იყოს მითითებული პიქსელებში (px) ან პროცენტულად (%).
ფერი შეიძლება იყოს მითითებული RGB (წითელი მწვანე ლურჯი) ფორმატით ან HTML HEX კოდით.

ქვემოთ მოცემულია ხაზის ტიპებიმათი სახელებით:

როგორ დავაყენოთ საზღვრები ელემენტზე? ჩვენ ვაკეთებთ შემდეგნაირად:

#ბლოკი (
საზღვარი: 3px მყარი # 0085cc; / * დააყენეთ 3px ლურჯი ხაზი * /
}

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

საზღვარი-ზედა- ჩარჩო თავზე;
საზღვარი-ქვედა- ჩარჩო ბოლოში;
საზღვარი-მარცხენა- ჩარჩო მარცხნივ;
საზღვარი-მარჯვენა- ჩარჩო მარჯვნივ;

დაბლოკვა (
საზღვარი-მარჯვნივ: 3px მყარი # 0085cc;
საზღვარი-ქვედა: 2px დაშლილი # 0085cc;
}

Თუ გინდა ამოიღეთ ჩარჩოებიელემენტი CSS- ში, შემდეგ ჩაწერეთ თვისებების საზღვარში - არცერთი

ცარიელი (
საზღვარი: არცერთი; / * ცარიელი კლასის ელემენტს არ ექნება საზღვარი * /
}

მონახაზი

მონახაზი არის თვისება, რომელიც გჭირდებათ ელემენტის გარე საზღვრის დასადგენად.

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

მონახაზი: 2px dotted # 0085cc; / * 2 პიქსელიანი წერტილოვანი ლურჯი საზღვარი * /
კონტურისთვის, ასევე საზღვრისთვის, თქვენ შეგიძლიათ წაშალოთ საზღვრები არავის აკრეფით:

მადლობა ყურადღებისთვის!

წინა სტატია
გაკვეთილი 6.

ელემენტის საზღვრები.

შევსება და მინდვრები CSS– ში. რა არის ზღვარი და შევსება? შემდეგი სტატია
გაკვეთილი 8. როგორ დავაყენოთ ტექსტის ფერი და ელემენტის ფონი CSS- ში?

კომენტარები სტატიაზე (vk.com)

საზღვარი

ბრაუზერის მხარდაჭერა

12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

აღწერა

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

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

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

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

CSS თვისება: საზღვარი

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

Სინტაქსი

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

ქონების ღირებულებები

მაგალითი

აქ არის ტექსტი.

ამ მაგალითის შედეგი ბრაუზერის ფანჯარაში:



როგორ დავაყენოთ ყუთში საზღვრის ფერი, სტილი და ზომა.

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

საზღვრის ატრიბუტი

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

CSS– ში ჩვენ შეგვიძლია გავაკონტროლოთ საზღვრის სიგანე საზღვრის სიგანეან უფრო ზუსტად, ჩვენ შეგვიძლია გავაკონტროლოთ თითოეული მხარის სისქე ცალკე:
საზღვარი-ზედა სიგანე- ზედა საზღვრის სისქე
საზღვარი-მარჯვენა-სიგანე- მარჯვენა საზღვრის სისქე
საზღვარი-ქვედა-სიგანე- ქვედა საზღვრის სისქე
საზღვარი-მარცხენა-სიგანე- მარცხენა საზღვრის სისქე
მაგრამ ასევე შეიძლება იყოს სტენოგრამის ფორმა:
P (საზღვრის სიგანე: ზედა მარჯვენა ქვედა მარცხენა;)(ზედა მარჯვენა ქვედა მარცხენა).
ბორდიურის სიგანე შეიძლება დაინიშნოს:
ფიგურები DIV (საზღვრის სიგანე: 5px), ნულიდან უსასრულობამდე, ე.ი. დადებითი
გამხდარი- თხელი საზღვარი, DIV (საზღვრის სიგანე: თხელი)
საშუალო- საშუალო საზღვარი, DIV (საზღვრის სიგანე: საშუალო)
სქელი- სქელი საზღვარი, DIV (საზღვრის სიგანე: სქელი)
ნათელია ციფრებით, მაგრამ ამ მნიშვნელობებით ეს ყველაფერი დამოკიდებულია ბრაუზერზე, მაგრამ მაინც გამხდარი<= medium <= thick .

ჩვენ ასევე შეგვიძლია გავაკონტროლოთ საზღვრის ფერი საზღვრის ფერიან უფრო ზუსტად რომ ვთქვათ თითოეული მხარის ფერით:
საზღვარი-ზედა ფერიზედა საზღვრის ფერი;
საზღვარი-მარჯვენა ფერიმარჯვენა საზღვრის ფერი;
საზღვარი-ქვედა-ფერიქვედა საზღვრის ფერი;
საზღვარი-მარცხენა ფერისაზღვრის ფერი მარცხენა მხარეს.
ფერის მნიშვნელობა დადგენილია როგორც ფერი, ე.ი. 16 ფერიდან ერთი: აკვა, შავი, ლურჯი, ფუქსია, ნაცრისფერი, მწვანე, ცაცხვი, მეწამული, ლურჯი, ზეთისხილი, მეწამული, წითელი, ვერცხლისფერი, ცისფერი, თეთრი ან ყვითელიასევე შესაძლებელია ფერების დაყენება: ფერი: # 000000, ფერი: # AF0 , ფერი: rgb (255,0,0)ან ფერი: rgb (100%, 0%, 0%).
არ აქვს მნიშვნელობა რა ფერის სქემას აირჩევთ, ბრაუზერები მაინც თარგმნიან მას ფერი: rgb (255,0,0)... Მაგალითად ფერი: ცაცხვი = ფერი: # 00ff00 = ფერი: # 0F0 = ფერი: rgb (0%, 100%, 0%), მაგრამ ბრაუზერისთვის მნიშვნელობა არ აქვს ფერი: rgb (0,255,0), ე.ი. ის გამოთვლის ამ მნიშვნელობას.

თუ საზღვრის სისქე და ფერი შეიძლება კონტროლდებოდეს HTML- ით, მაშინ სტილი ( საზღვრის სტილში) მხოლოდ CSS !!!
სტილი შეიძლება გაკონტროლდეს თითოეული მხარის მიერ ცალკე:
საზღვრის უმაღლესი სტილიზედა საზღვრის სტილი;
საზღვრის მარჯვენა სტილშიმარჯვენა საზღვრის სტილი;
საზღვრის ქვედა სტილიქვედა საზღვრის სტილი;
საზღვრის მარცხენა სტილშისაზღვრის სტილი მარცხენა მხარეს.
ახლა მოდით შევხედოთ სტილის ღირებულებებს:
1)სასაზღვრო სტილი: არცერთი- ეს არის ნაგულისხმევი, საზღვრის სიგანის მსგავსი: 0.
2)სასაზღვრო სტილი: დამალული- იგივე მაგიდების გარდა, რომელსაც მოგვიანებით შევხედავთ.
3)საზღვრის სტილი: წერტილოვანი- წერტილოვანი საზღვარი.
4)საზღვრის სტილი: მოწყვეტილი- წერტილოვანი ხაზის საზღვარი.
5)საზღვრის სტილი: მყარი- მყარი ხაზის საზღვარი, ე.ი. როგორც HTML- ში.
6)სასაზღვრო სტილი: ორმაგი- ორმაგი მყარი ხაზის საზღვარი, აქ გჭირდებათ საზღვრის სიგანე მინიმუმ 3 პიქსელი.
7)საზღვრის სტილი: ღარი- საზღვარი თითქოს ტილოშია გაჭრილი.
8)საზღვრის სტილი: ქედი- საზღვარი ტილოდან ამოვარდნილს ჰგავს.
9)საზღვრის სტილი: ჩასმული- მთელი ყუთი ჰგავს ტილოზე დაჭერილს.
10)საზღვრის სტილი: დასაწყისი- წინასაპირისპიროდ.
ზოგიერთმა ბრაუზერმა შეიძლება იგნორირება გაუკეთოს მნიშვნელობებს: წერტილოვანი, დაშლილი, ორმაგი, ღარიანი, ქედი, ჩასმული და დაწყებული და გამოუშვას ისინი მყარი სახით, ე.ი. ჩვეულებრივი საზღვარი.

რა თქმა უნდა, ეს ასეა, მაგრამ ყველა ზემოთ მოყვანილი მაგალითი მხოლოდ მოქმედების პრინციპია და არა მექანიზმი.
წესის ქონება საზღვარიგულისხმობს (საზღვარი: ზომა სტილის ფერი;), ეს წესი შესრულებულია, თუ სამივე მნიშვნელობა არსებობს და მხოლოდ ამ თანმიმდევრობით, მაგალითად H1 (საზღვარი: 5px ორმაგი წითელი;), მაგრამ შეიძლება არსებობდეს გამონაკლისები, თუ ეს მნიშვნელობები მოცემულია მარკირების ენებით, მაგალითად, ცხრილისთვის ცხრილი (საზღვარი: 2 პიქსელი), ე.ი. მითითებულია მხოლოდ ერთი მნიშვნელობა.

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

გამონაკლისი არის ეს წესი:
H1 (
საზღვარი: 4px მყარი მწვანე;
}
საქმე ის არის, რომ CSS– ში ბოლო წესს აქვს უმაღლესი პრიორიტეტი, ამ შემთხვევაში სასაზღვრო თვისება შეიცავს საზღვარს მარცხნივ და, შესაბამისად, საზღვრის მარცხენა წესი იგნორირებული იქნება, ზუსტად ასე:
H1 (
საზღვარი: 4px მყარი მწვანე;
საზღვარი-მარცხენა: 2px ორმაგი წითელი;
}
თავიდანვე ჩვენ ვადგენთ წესებს მთლიანი ბორდიურის, შემდეგ კი ცალკეული უბნებისათვის.

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

CSS: საზღვარი. ელემენტის საზღვრები.

CSS3 საზღვრები

CSS3 საზღვრები

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

ამ გაკვეთილში თქვენ შეიტყობთ შემდეგი საზღვრის თვისებების შესახებ:

• საზღვარი-რადიუსი
• ყუთი-ჩრდილი
• საზღვრის გამოსახულება

ბრაუზერის მხარდაჭერა

ქონება	ბრაუზერის მხარდაჭერა
საზღვარი-რადიუსი
ყუთი-ჩრდილი
საზღვრის გამოსახულება

Internet Explorer 9 მხარს უჭერს საზღვრის ზოგიერთ ახალ თვისებას.

Firefox მოითხოვს -moz- პრეფიქსს სასაზღვრო გამოსახულებისათვის.

Chrome და Safari საჭიროებენ –webkit– პრეფიქსს სასაზღვრო გამოსახულებისათვის.

ოპერა მოითხოვს საზღვრის გამოსახულების -o- პრეფიქსს.

Safari ასევე მოითხოვს -webkit- პრეფიქსს box-shadow- ისთვის.

ოპერა მხარს უჭერს ახალი სასაზღვრო თვისებებს.

CSS3 მომრგვალებული კუთხეები

CSS2– ში მომრგვალებული კუთხეების დამატება რთული იყო. ჩვენ უნდა გამოვიყენოთ განსხვავებული სურათები თითოეული კუთხისთვის.

CSS3– ში მომრგვალებული კუთხეების შექმნა ადვილია.

CSS3– ში საზღვრის რადიუსის თვისება გამოიყენება მომრგვალებული კუთხეების შესაქმნელად:

ამ ბლოკს აქვს მომრგვალებული კუთხეები!

CSS3 ყუთის ჩრდილი

CSS3- ში box-shadow თვისება გამოიყენება კონტეინერებში ჩრდილების დასამატებლად:

CSS3 სასაზღვრო-სურათი

CSS3 border-image თვისებით, თქვენ შეგიძლიათ გამოიყენოთ სურათი, რომ შექმნათ საზღვარი:

საზღვრის გამოსახულების თვისება საშუალებას გაძლევთ მიუთითოთ საზღვრის სურათი!

საზღვრის შესაქმნელად გამოყენებული ორიგინალური სურათი თქვენია:

ახალი სასაზღვრო თვისებები



საზღვრის ატრიბუტი

საზღვრის ატრიბუტი, ტეგი

, გამოიყენება მაგიდის გარშემო საზღვრის სისქის დასაზუსტებლად.

HTML საზღვრები

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

გარდა ამისა, თუ საზღვრის ატრიბუტი არის ნულოვანი, მაშინ ბრაუზერები ასევე აჩვენებენ წვრილ საზღვრებს თავად უჯრედების გარშემო. ამ საზღვრების ჩვენება შეიძლება კონტროლდებოდეს წესების ატრიბუტის გამოყენებით.

ღირებულებები

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

ნაგულისხმევი მნიშვნელობა: 0.

Სინტაქსი

საჭირო ატრიბუტი: არცერთი.

HTML მაგალითი: საზღვრის ატრიბუტის გამოყენება

მაგალითი შედეგი

შედეგი. საზღვრის ატრიბუტის გამოყენება.



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

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

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

• საზღვარი -სიგანე - საზღვრის სისქე. თქვენ შეგიძლიათ დააყენოთ ის პიქსელებში (px) ან გამოიყენოთ სტანდარტული მნიშვნელობები თხელი, საშუალო, სქელი (ისინი განსხვავდებიან მხოლოდ სიგანეში პიქსელებში)
• საზღვრის სტილი - გაწეული საზღვრის სტილი. შეუძლია მიიღოს შემდეგი მნიშვნელობები
  • არცერთი და არც ფარული - აუქმებს საზღვარს
  • წერტილოვანი - წერტილოვანი ჩარჩო
  • მოწყვეტილი - ტირე ჩარჩო
  • მყარი - მარტივი ხაზი (გამოიყენება ყველაზე ხშირად)
  • ორმაგი - ორმაგი საზღვარი
  • groove - 3D grooved საზღვარი
  • ქედი, ჩასმული, საწყისი - სხვადასხვა 3D ჩარჩოს ეფექტები
  • მემკვიდრეობა - გამოიყენება მშობლის ელემენტის მნიშვნელობა
• საზღვრის ფერი - საზღვრის ფერი. შეიძლება დაყენდეს კონკრეტული ფერის სახელის გამოყენებით ან 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 "

СХОЖИЕ СТАТЬИ



Другое

Table расстояние между ячейками



Интернет

Php все переменные. Переменные в PHP. Что такое область видимости



Windows 8

Доработка блоков питания



Windows 8

Комментарии в HTML, CSS, PHP



Безопасность

Пример: Применение свойства border-collapse



Интернет

Двумерный массив в JavaScript Javascript array многомерный



Материнские платы

Создание рамок в CSS. Свойство border. Двойная рамка с использованием CSS Как сделать border с одной стороны



Материнские платы

Параметры css width и height для задания размеров элементов html страницы А что если у родительского элемента установлено свойство min-height, а не height



Windows 7

Как делается в html выпадающий список?

Рекомендуем



Windows 8

Как сделать в css все заглавные буквы Как сделать заглавные буквы при помощи css

Доброго времени суток, гики сайтостроения. В сегодняшней публикации будет рассмотрена тема, касающаяся оформления текстового контента. Именно поэтому вы...



Подключение файлов в PHP используя include и require

Корпуса



Горизонтальные и вертикальные линии в HTML

Другое



Обновление браузеров интернета до новейшей модификации Как обновить браузер на ноутбуке

Безопасность



Урок по HTML. Объединение ячеек. Объединение ячеек Объединение ячеек по горизонтали html

Интернет



Как писать в html комментарии в коде?

Windows 8



Не заряжается Galaxy A3 Самсунг а3 не заряжается

Процессоры

Как обновить прошивку на Самсунг Галакси

Прошивка андроид 7.1 скачать для разных. Обзор Android Nougat — все секреты, фишки и новые функции. Возвращение к более ранней версии Android

Что лучше айфон самсунг s7

Что делать с заблокированным смартфоном после его сброса Как обойти подтверждение аккаунта Google

Ошибка Google play "Не поддерживается на вашем устройстве"

S Voice что это за программа на Андроид?

Что делать, если на Android нельзя установить сервисы Google Play

Huawei P8 - Технические характеристики Радио мобильного устройства представляет собой встроенный FM-приемник

Huawei P8 - Технические характеристики Информация о других важных технологиях подключения, поддерживаемых устройством

Как перезагрузить "Самсунг": способы и профилактика зависаний

Последняя версия андроид 7

Как без проблем установить CyanogenMod на свой Android Не удалось загрузить обновление cyanogenmod

Что делать, если приложение экран Touchwiz на Samsung остановлено Включаем отключенные приложения

Разбираемся в линейке смартфонов Samsung Самый лучший смартфон самсунг

Обзор Samsung Galaxy A7 – лучший средний класс с флагманскими возможностями

удачное обновление линейки Обновление samsung a5

Приватный режим самсунг s5 mini забыл пароль

Установка часов на рабочий стол Android На виджете яндекс останавливается время
© Copyright 2021 - Ремонт компьютеров и ноутбуков. Видеокарты, винчестеры, интернет, мониторы.