Bir nesnenin kenarlığını, yani kenarlığın kalınlığını, rengini ve stilini oluşturmak için CSS sınır özelliği takma adları. 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, web sitesi başlığı, menü vb. Tasarlayın.

1. CSS kenarlık söz dizimi

border: border-width border-style border-color | miras almak;

• border-width - kenarlık kalınlığı. Bunu piksel (piksel) olarak ayarlayabilir veya standart ince, orta, kalın değerleri kullanabilirsiniz (yalnızca piksel cinsinden genişlik bakımından farklılık gösterirler)
• border-style - işlenmiş kenarlığın stili. Aşağıdaki değerleri alabilir
  • yok veya gizli - kenarlığı iptal eder
  • noktalı - noktalı çerçeve
  • çizgili - çizgi çerçevesi
  • düz - basit çizgi (en sık kullanılır)
  • çift \u200b\u200b- çift kenarlık
  • oluk - 3D oluklu kenarlık
  • mahya, ek, başlangıç \u200b\u200b- çeşitli 3B çerçeve efektleri
  • miras al - üst öğenin değeri uygulanır
• border-color - kenarlık rengi. Belirli bir renk adı kullanılarak veya RGB formatında ayarlanabilir (site için html renk adlarına bakın)

CSS border özelliğindeki değerler herhangi bir sırada belirtilebilir. En yaygın kullanılan sıra "kalınlık stili rengi" dir.

2. Farklı CSS sınır kenarlıklarına sahip örnekler

2.1. Misal. Farklı sınır tarzı sınır dekorasyon 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 "

Михаил 2016-06-11 1 HTML и CSS 0

Как делается в css двойная рамка?

Всем привет. А вы знаете, как делать в css двойную рамку? Если нет, то прошу ознакомиться с этой небольшой заметкой. Дело в том, что это не сделаешь с помощью обычного border , тут нужно идти другим путем.

Если вы задаете рамку с помощью свойства border , то можете задать ее только одну. Но очень часто по дизайну может требоваться несколько рамок. В таком случае стоит воспользоваться псевдорамкой — тенью.

Двойная рамка с помощью box-shadow

Вообще если вы хотите подробнее изучить тень в css, то советую вам прочитать на соответствующую тему. В этой статье я не буду подробно объяснять синтаксис свойства, а просто покажу прием, как создать двойную рамку. Итак, создам обыкновенный блок, которому пропишу некоторые стили. Блок может быть любым и с любым содержимым. В моем случае это простой div, поэтому html код я даже не буду показывать. А вот стили:

Div{
background: #E0D8A3;
width: 180px;
height: 110px;
padding: 12px;
}

Ну типичный пример оформления блока.
Теперь создадим двойную рамку с помощью множественных теней. Добавлю в стили к блоку еще такое свойство:

Box-shadow: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

Вот так это выглядит:

Как видите, получилось достаточно симпатично. В box-shadow всего 5 параметров. Первый — смещение тени по горизонтали, второй — по вертикали. Третий и четвертый параметры — размытие и растяжение. Как видите, первые три мы не трогаем вообще. Размытие нам не нужно, потому что нам нужна резкая тень. Как видите, я прописывал четвертый параметр — растяжение. Он определяет, насколько тень будет больше элемента, к которому привязана.

По умолчанию все выглядит так — тень одинаковых размеров с элементом и лежит четко под ним. Если вы меняете растяжение, то тень начинает выступать за элемент. Именно так можно создавать рамки, абсолютно такие же, как свойством border . Ну а с пятым параметром, я думаю, все понятно — это цвет тени.

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Свойство для оформления текста и шрифта мы изучили, теперь пришла очередь переходить к другим элементам. В этом уроке мы рассмотрим, создание рамок средствами CSS . Данное свойство используется достаточно часто, поэтому ему стоит уделить немного больше внимания.

И так, давайте предположим, что вокруг какого-то элемента нужно сделать рамку. Например, создадим заголовок и вокруг него сделаем рамку.

Параметры характеризующие рамку: 1) Толщина рамки, 2) Стиль рамки и 3) Цвет рамки. И давайте по порядку:

• 1. Толщина рамки: border-width:2px ;
• 2. Стиль рамки: border-style:solid ;
• 3. Цвет рамки: border-color:#ff0000 ;

Какие бывают стили рамок в CSS ? Ниже приведены все доступные стили рамок:

• dotted - Это точечная рамка.
• dashed - Это пунктирная рамка
• solid - Это сплошная рамка
• double - Это двойная рамка
• groove - Объемный вид
• ridge - Объемный вид
• inset - Объемный вид
• outset - Объемный вид

Теперь у нас есть все, чтобы создать рамку вокруг заголовка.

HTML

Создание рамки вокруг заголовка.

И сам стиль для рамки.

H2{ border-width: 2px; border-style: solid; border-color: #FF0000; }

В результате вокруг созданного заголовка появилась сплошная рамка красного цвета толщиной в 2px.

Рамка формируется из четырех сторон: Верхней , Правой , Нижней и Левой и, так как у нас указанно свойство border , то браузер по умолчанию рисует все четыре стороны рамки. Таким образом, если требуется задать рамку только с какой-то одной стороны, то используются приставки указывающие сторону, где создать рамку.

• top - Верх.
• right - Право
• bottom - Низ
• left - Лево

Таким образом если мы хотим рамку сделать только снизу абзаца то есть подчеркнуть его то к каждому свойству border добавляем приставку bottom . В результате получится следующая структура кода.

H2{ border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; }

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

H2{ border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; border-top-width: 2px; border-top-style: double; border-top-color: #FF0000; }

Теперь заголовок будет обводится красной рамкой сверху и снизу. Аналогично можно сделать и для других сторон.

Как Вы уже наверное заметили, запись получилась достаточно большая, поэтому существует сокращенный вид записи который за частую на практике и используется.

На картинке выше представлена структура сокращённой записи, где указывается свойство border и в качестве значений, через пробел, указывается ширина рамки - border-width , стиль рамки - border-style и цвет рамки - #ff0000 .

То есть браузер, увидев такую, сокращенную запись border:2px solid #ff0000 ; , так же создаст рамку со всех четырех сторон заголовка. Вот такая короткая запись эквивалентна той записи, что мы использовали выше (где применялось три свойства).

Если с помощью короткой записи нужно указать рамку только с одной стороны, то к свойству добавляем простаку указывающую сторону с которой создать рамку.

H2{ border-top:2px solid #ff0000; }

Вот так, с помощью короткой записи делается рамка с верху, где так же указаны толщина, стиль, и цвет рамки.

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

Рамки имеют многообразное применение, например, как декоративный элемент или для отделения двух объектов. CSS предоставляет бесчисленное множество вариантов использования рамок.

Толщина рамки

Толщина рамки определяется свойством border-width , которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:

Цвет рамки

Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .

Типы рамок

Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5. Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

Примеры определения рамок

Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. Для иллюстрации взглянем на документ, где определены разные рамки для

,

,

и

Результат, может быть, не столь впечатляющ, но он демонстрирует некоторые возможности:

H1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }

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

H1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }

Сокращённая запись

Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border. Пример:

P { border-width: 1px; border-style: solid; border-color: blue; }

можно объединить в:

P { border: 1px solid blue; }

Резюме

В этом уроке вы познакомились с безграничными возможностями CSS при использовании рамок.

В следующем уроке мы рассмотрим, как определять размеры в боксовой модели - height и width.

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

3 piksel kırmızı kenarlığa sahip bir div.

Bir öğenin yalnızca bir tarafında bir sınır stili belirtebilirsiniz. Bunu yapmak için, border-top (üst sınır), border-right (sağ kenarlık), border-bottom (alt kenar), border-left (sol kenarlık) özelliklerini kullanın.

Farklı sınırlara sahip div bloğu.

Bu örnekte, kutunun her bir tarafı farklı bir kenar kalınlığına, stiline ve rengine sahiptir.

CSS kullanarak böyle bir şekli nasıl oluşturabileceğinizi düşünün:

Sınır değerleri - kalınlık, stil ve renk - özel özellikler kullanılarak ayrı ayrı ayarlanabilir.

• border-style - kenarlığın stili.
• border-width - sınırın genişliği.
• border-color - kenarlık rengi.

Değerlerin her birini ayrı ayrı ele alalım.

Kenarlık stili özelliği. Sınır stili.

Kenarlık stili özelliği, sınırın stilini ayarlar. CSS'de, HTML'den farklı olarak, bir öğenin kenarlığı sağlam bir sınırdan daha fazlası olabilir. Kenarlık stili için geçerli değerler şunlardır:

1. yok - kenarlık yok (varsayılan).
2. düz - düz kenarlık.
3. çift \u200b\u200b- çift kenarlık.
4. kesikli - kesikli kenarlık.
5. noktalı, nokta kenarlıklarından oluşan bir çizgidir.
6. sırt - sırt sınırı.
7. oluk - oluk sınırı.
8. inset - girintili kenarlık.
9. başlangıç \u200b\u200b- ekstrüde sınır.

Nasıl göründüklerine dair örnekler.

kenarlık yok (yok)




düz kenarlık




çift \u200b\u200bkenarlık (çift)




noktalı kenarlık




kesikli kenarlık (kesikli)




oluk sınırı




sırt sınırı




iç kenarlık




ekstrüde kenarlık (başlangıç)

Bu arada, mahya çerçevesi için bordür rengini siyaha ayarlarsanız, aşağıdaki sonucu elde edersiniz.

Siyah kenarlıklı ve sırt stiline sahip bir div.

Kenarlık düz gibi görünür, ancak bunun nedeni sırt stilinin siyah alt gölge efekti eklenerek oluşturulması ve siyah kenarlık üzerindeki siyah efektin görünmemesidir.

Border-style özelliği kullanılarak, border stili bloğun tüm kenarlarından daha fazlası için ayarlanabilir. Bir border-style özelliği için birkaç değer ayarlamak mümkündür, değerlerin sayısına bağlı olarak, border style bloğun farklı sayıda tarafına atanacaktır. Bir, iki, üç ve dört değer ayarlayabilirsiniz. Her durum için örneklere bakalım.

Tek değer (sabit) - kenarlık stili bloğun tüm tarafları için ayarlanır.




İki değer (düz çift) - ilk değer, üst ve alt tarafların stilini, ikincisi ise tarafın stilini belirler.




Üç değer (düz çift noktalı) - üst taraf için ilk değer, ikinci taraf için, üçüncüsü alt için.




Dört değer (düz çift noktalı kesikli) - üstten başlayarak saat yönünde bir taraf için her bir değer.

Sınır genişliği özelliği. Sınır kalınlığı.

Border-width özelliği, bir elemanın kenarlık kalınlığını ayarlamak için kullanılır. Kenarlık kalınlığı, pikseller gibi herhangi bir mutlak ölçü biriminde belirtilebilir.

Kenarlık stili özelliğinde olduğu gibi, özellik de birden dört değere ayarlanabilir. Her durum için örneklere bakalım.





Örnek kod:

Bir değer (2px) - bloğun tüm tarafları için sınır kalınlığı ayarlanır.


İki değer (1px 5px) - ilk değer, üst ve alt taraflar için, ikincisi ise kenarlar için kalınlığı ayarlar.


Üç değer (1px 3px 5px) - üst taraf için ilk değer, yanlar için ikinci ve alt için üçüncü değer.


Dört değer (1px 3px 5px 7px) - üstten başlayarak saat yönünde bir taraf için her bir değer.

Border-width özelliği için de anahtar kelime değerleri vardır. Üç tane var:

• ince - ince kenarlık;
• orta - orta kalınlık;
• kalın - kalın kenarlık;

Sınır kalınlığı: ince.




Sınır kalınlığı: orta.




Sınır kalınlığı: kalın.

Border-color özelliği. Sınır rengi.

Kenarlık rengi aracı, kenarlık rengini kontrol etmek için kullanılır. Bu özelliğin renkleri, "CSS'de Renkler" makalesinde açıklanan herhangi bir yöntem kullanılarak ayarlanabilir, yani:

• Rengin onaltılık gösterimi (# ff00aa).
• RGB biçimi - rgb (255,12,110). CSS3 için RGBA formatı.
• CSS3 için HSL ve HSLA biçimleri.
• Renk adı, örneğin siyah. Renk adlarının tam listesi için CSS renk adları tablosuna bakın.

Border-color özelliği de bir ila dört değere sahip olabilir ve bunları önceki özelliklerle aynı şekilde işler.

Bir değer (kırmızı).




İki değer (kırmızı siyah).




Üç anlam (kırmızı siyah sarı).




Dört anlam (kırmızı siyah sarı mavi).

Şimdi yukarıda bahsedilen probleme geri dönelim ve bir şekil çizelim:

İşte böyle bir şekli çizen kod, sadece boyutu daha büyük:

Taraflar için ayrı değerler ayarlama

Yukarıda bahsedildiği gibi, bir bloğun yalnızca bir tarafı için sınır özelliği değerleri belirleyebilirsiniz. Bu amaçlar için özellikler vardır:

• border-top (üst sınır)
• border-right (sağ kenarlık)
• border-bottom (alt kenarlık)
• border-left (sol kenarlık)

Tüm özelliklerin herhangi bir sırada üç değere (kalınlık, stil ve renk) sahip olduğunu hatırlatmama izin verin. Ancak her bir taraf için kalınlık, renk ve stili ayrı ayrı ayarlamanıza izin veren özellikler vardır. Bu özelliklerin yazımı yukarıdan türetilmiştir.

Üst kenarlık seçenekleri (üst sınır).

• border-top-color - Öğenin üst kenarlığının rengini ayarlar.
• border-top-width - Öğenin üst kenarlığının kalınlığını ayarlar.
• border-top-style - Bir öğenin üst kenarlığının stilini ayarlar.

Sağ kenarlık seçenekleri (sınır-sağ).

• border-right-color - Bir öğenin sağ kenarlığının rengini ayarlar.
• border-right-width - Bir öğenin sağ kenarlığının genişliğini ayarlar.
• border-right-style - Bir öğenin sağ kenarlığının stilini ayarlar.

Alt parametreler (kenarlık-alt).

• border-bottom-color - öğenin alt kenarlığının rengini ayarlar.
• border-bottom-width - Öğenin alt sınırının genişliğini ayarlar.
• border-bottom-style - Bir elemanın alt kenarlığının stilini ayarlar.

Sol kenarlık seçenekleri (sınır-sol).

• border-left-color - Öğenin sol kenarlığının rengini ayarlar.
• border-left-width - Öğenin sol kenarlığının genişliğini ayarlar.
• border-left-style - Öğenin sol kenarlığının stilini ayarlar.

Bu özelliklerin kullanımına bir örnek:

Bu örnekte, div'e ilk olarak 3 piksellik bir kenarlık ve her tarafta düz bir stil verilmiştir. Sonra:
• border-top-color özelliği ile üst sınırın rengini kırmızı olarak yeniden tanımladı,
• border-right-width özelliğini kullanarak, sağ kenarlığın kalınlığı 10px olarak ayarlanır,
• border-bottom-style özelliği kullanılarak, alt kenarlık stili double olarak yeniden tanımlanır,
• border-left-color özelliği kullanılarak sol kenarlık maviye ayarlanır.

Sınır yarıçapı özelliği. Sınırın köşelerini yuvarlamak.

Border-radius özelliği, bir öğenin sınırlarının köşelerini yuvarlamak içindir. Bu özellik CSS3'te tanıtıldı ve Internet Explorer 8 (ve daha eski sürümler) dışında tüm modern tarayıcılarda düzgün çalışıyor.

Değerler, CSS'de kullanılan herhangi bir sayı olabilir.

Border-radius özelliği 15px'dir.

Blok çerçeve belirtilmezse, arka planda yuvarlama gerçekleşir. Aşağıda, kenarlıksız ancak arka plan rengiyle bir kutuyu yuvarlama örneği verilmiştir:

Border-radius özelliği 15px'dir.

Bir elemanın her köşesini ayrı ayrı yuvarlama özellikleri vardır. Bu örnek hepsini kullanıyor:

Kenarlık sol üst yarıçap: 15px; border-top-right-radius: 0; kenarlık-sağ-alt-yarıçap: 15px; kenarlık-alt-sol-yarıçap: 0;

Border-radius özelliği 15px'dir.

Bu kod tek bildirimde yazılabilse de: border-radius: 15px 0 15px 0. Buradaki nokta, border-radius özelliğinin bir ila dört değer arasında ayarlanabilmesidir. Aşağıdaki tablo, bu tür reklamları yöneten kuralları listelemektedir.

Bu tabloyu dikkatlice inceledikten sonra, gerekli stilin en kısa kaydının şöyle olacağını anlayabilirsiniz: border-radius: 15px 0. Sadece iki değer.

Biraz pratik

CSS kullanarak limon çizmek.

İşte böyle bir bloğun kodu:

Marj: 0 otomatik; / * Bloğu ortaya yerleştir * / genişlik: 200px; yükseklik: 200px; arka plan: # F5F240; kenarlık: 1 piksel düz # F0D900; sınır yarıçapı: 10px 150px 30px 150px;

Şekli zaten çizdik:

Şimdi ondan bir üçgen bırakalım:

Üçgen kodu şuna benzer:

Marj: 0 otomatik; / * Bloğu ortaya yerleştir * / padding: 0px; genişlik: 0px; yükseklik: 0; sınır: 30px düz beyaz; border-bottom-color: kırmızı;