Как сделать рамку прозрачной css

Добавил пользователь Morpheus
Обновлено: 10.09.2024

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

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

solid – сплошная рамка;

dashed – пунктирная рамка;

dotted – точечная рамка;

double – рамка двойной линией;

groove – рамка с тенью;

ridge — с рельефом;

Ещё два свойства необходимые для создания простых рамок — это

widht – толщина рамки;

color – цвет рамки;

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

Далее задаются отступы для рамок. Задаются они следующими свойствами:

padding – внутренний (отступ рамки от содержания);

margin — внешний (отступ рамки от внешних объектов);

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

top – отступ сверху;

righnt – отступ cправа;

bottom – отступ снизу;

left – отступ слева

Записываются значения этих свойств в сокращённом варианте друг за другом ( padding: 10px 30px 15px 20px ), и первым ставится значение top , а дальше по часовой стрелке остальные.

Если поставить только одно значение, то это будет значить, что отступ со всех сторон будет одинаковый.

Далее рассмотрим, как задаются высота и ширина рамки. Высота рамки задаётся браузером автоматически, и выбирается таким образом, чтобы в нем уместилось содержание, с учётом заданных отступов. А вот ширину мы с вами будем задавать самостоятельно.

Задаётся она свойством width, и в значении его указывается желаемый размер в пикселях, или других мерах длины, принятых в веб.

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

И последнее, что необходимо сделать — это расположить рамку на странице. Делается это при помощи, уже имеющегося, свойства margin.

А если нужно просто расположить блок рамки по центру страницы, то в свойство margin добавляется значение auto.

Для первого примера создадим html документ, и создадим рамки solid для блока body (тело документа), и одному абзацу.

В следующих примерах будет изменяться только CSS (то, что заключено в тег style ).

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

Дальше немного интереснее. Создадим рамку с закруглёнными уголками.

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

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

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

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

Если поиграть с дробным значением border-radius , можно сделать эллипс любого вида.

Первое число в дроби — это изгиб вертикальной составляющей угла, второе — горизонтальной.

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

Реализуется эта опция при помощи псевдокласса :hover .

В спокойном состоянии:

При наведении курсора:

Этот же метод можно применить к разноцветной рамке, и менять при наведении курсора, какой нибудь один цвет.

Желаю творческих успехов.

Перемена

На улице Дублина двое ирландцев дерутся. К ним подходит еще один, снимает шляпу и спрашивает:
— Простите, это частная драка или любой может вмешаться.

когда я зависаю над li граница появляется без создания li ' s shift вокруг. Возможно ли иметь невидимую "границу"?

вы можете использовать "прозрачный", как цвет. В некоторых версиях IE это появляется как черный, но я не тестировал его с IE6 дней.

многие из вас должны приземляться здесь, чтобы найти решение для непрозрачной границы вместо прозрачной. В этом случае вы можете использовать rgba , где a расшифровывается как alpha .

здесь вы можете изменить opacity на border С 0-1

если вы просто хотите полную прозрачную границу, то лучше всего использовать transparent , как border: 1px solid transparent;

вы можете удалить границу и увеличить заполнение:

Эй это лучшее решение, которое я когда-либо испытывал.. это с помощью CSS3

использовать следующее свойство div или куда ты хочешь поставить границы прозрачной

это будет работать..

Да, вы можете использовать border: 1px solid transparent

другое решение-использовать outline при наведении (и установите границу в 0) , что не влияет на поток документов:

NB. Контур можно задать только как свойство sharthand, а не для отдельных сторон. Он предназначен только для отладки, но он отлично работает.

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

в CSS3 есть две разные так называемые"модели коробки". Один добавляет границу и отступ к ширине элемента блока, в то время как другой этого не делает. Вы можете использовать последнее, указав

тогда в современных браузерах элемент всегда будет иметь одинаковую ширину. То есть, если применить границу к нему при наведении, ширина границы не будет добавляться к общей ширина элемента; граница будет добавлена "внутри" элемента, так сказать. Однако, если я правильно помню, вы должны указать width явно, чтобы это работало. Это, вероятно, не вариант для вас в этом конкретном случае, но вы можете иметь это в виду для будущих ситуаций.

эта запись в блоге есть способ, чтобы эмулировать border-color: transparent в IE6. В приведенном ниже примере включено исправление "hasLayout", которое выводится в комментариях к записи в блоге:

самое простое решение для этого-использовать rgba цвет: border-color: rgba(0,0,0,0); полностью прозрачный цвет границы.

В этой статье изучим CSS-свойства для стилизации границ элемента: border , border-width , border-style , border-color , border-radius , border-image , border-image-source , border-image-slice , border-image-width , border-image-outset и border-image-repeat .

border - оформление границ элемента

CSS-свойство border предназначено для управления оформлением границ элемента. Границы располагаются перед фоном элемента.

border – это универсальное свойство для стилизации границ (рамки) вокруг элемента. Оно позволяет установить сразу три характеристики: толщину границ ( border-width ), стиль линий ( border-style ) и цвет ( border-color ).

border состоит из трёх других свойств (в скобках приведены значения каждого из них, которые они имеют по умолчанию):

border-width (medium);
border-style (none);
border-color (currentcolor).

Свойство border устанавливает стили сразу для всех четырёх границ. В отличие от него border-width , border-style и border-color могут принимать до 4 значений, и тем самым стилизовать каждую из сторон по-отдельности.

При установке меньшего количества значений:

border-width – толщина границы

CSS-свойство border-width определяет толщину границы. По умолчанию данное свойство имеет значение medium , что эквивалентно 3px.

Задавать значение можно с помощью ключевых слов: thin (эквивалентно 1px), medium (3px) и thick (5px), а также используя различные единицы измерения: px, em, rem, vh, vw.

border-style – тип линии

CSS-свойство border-style предназначено для установки стилей границам.

solid – сплошная непрерывная линия;
none (по умолчанию) – без отображения границы;
hidden – то же самое, что none , за исключением отображения границ у ячеек таблицы с border-collapse: collapse ;
dashed – штриховая линия;
dotted – линия из точек;
double – двойная линия;
groove – линия со вдавленным эффектом;
ridge – линия с выпуклым эффектом;
inset – добавляет эффект к границе таким образом, чтобы весь блок выглядел вдавленным;
outset – добавляет эффект к границе таким образом, чтобы весь блок выглядел выпуклым;

Отличие между border-style: none и border-style: hidden :

border-color – цвет линии

CSS-свойство border-color используется для установки цвета границам элемента. По умолчанию оно имеет значение currentcolor , т.е. наследует цвет элемента.

Задать определённый цвет границам можно разными способами, а именно с помощью:

Если указать одно значение, то оно будет применено сразу к 4 границам (верхней, правой, нижней и левой).

Но можно установить и отдельно для каждой, для этого значения необходимо перечислить через пробел:

Свойства для стилизации границ по-отдельности

В CSS имеются свойства, которые позволяют задать стиль определённой границы (top – верхней, right – правой, bottom – нижней и left – левой): border-top , border-right , border-bottom и border-left .

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

для толщины: border-top-width , border-right-width , border-bottom-width и border-left-width ;
для типа линии: border-top-style , border-right-style , border-bottom-style и border-left-style ;
для цвета: border-top-color , border-right-color , border-bottom-color и border-left-color .

border-radius – закругление углов

CSS-свойство border-radius позволяет скруглить углы границ элементов.

border-radius работает даже если у элемента нет границ, т.к. его действие распространяется и на фон.

В основном border-radius используется с одним значением.

Когда вы используете только одно значение, все углы элемента скругляются на это значение.

Кроме указания значений, с помощью единиц измерения для задания фиксированной длины (например: px, rem, em и т.д.), вы также можете использовать проценты.

В основном это используется для создания круга путем установки border-radius , равным 50%.

Значение, заданное в процентах, вычисляется в зависимости от ширины и высоты элемента. Поэтому, когда вы используете его для прямоугольника, углы у вас будут не симметричными.

Пример, показывающий разницу между border-radius: 40px и border-radius: 40% применительно к прямоугольнику:

border-radius позволяет установить радиус скругления отдельно для каждого угла. Для этого необходимо перечислить значения через пробел (начиная с верхнего левого угла и далее двигаясь по часовой стрелке):

Кроме этого, скруглить отдельно каждый угол можно с помощью свойств border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .

С двумя значениями:

С тремя значениями:

Кроме этого, border-radius позволяет создавать ассиметрично скруглённые углы. Осуществляется это с помощью косой черты.

Перед косой черты указываются значения, отвечающие за горизонтальные расстояния, а после - вертикальные.

border-image – изображение в качестве рамки

border-image – это CSS-свойство, которое позволяет установить в качестве границ элемента изображение или CSS градиент.

border-image можно применить к любому элементу, за исключением тегов, определяющих содержимое таблицы ( tr , th , td ) когда в качестве значения border-collapse установлено collapse .

border-image является краткой записью следующих пяти свойств:

border-image-source (none);
border-image-slice (100%);
border-image-width (1);
border-image-outset (0);
border-image-repeat (stretch).

Таким образом, пример приведённый выше с помощью специальных CSS-свойств можно записать следующим образом:

Пример создания градиентной границы с помощью border-image :

border-image-source

border-image-source – задаёт изображение (посредством URL-адреса, URI-данных или встроенного SVG) или CSS градиент, который необходимо использовать для отрисовки границы. Значение по умолчанию: none .

border-image-slice

В процессе нарезки изображения образуется 9 областей: четыре угла, четыре стороны и центр.

Области 1 – 4 используется всего один раз для отрисовки соответствующих углов границ элемента;
Области 5 – 8 применяются для отрисовки соответствующих сторон границ, расположенных между углами. В зависимости от значения свойства border-image-repeat область исходного изображения может растягиваться, повторяться, масштабироваться или иным образом изменяться, чтобы соответствовать размерам элемента;
Область 9 является центральной и по умолчанию отбрасывается.

Для использования области 9 в качестве фонового изображения элемента, необходимо добавить в любое место значения border-image-slice ключевое слово fill . При этом это фоновое изображение будет располагаться поверх фактического background .

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

В border-image-slice можно установить от одного до четырёх значений:

при указании одного значения, все четыре среза создаются на одинаковом расстоянии от соответствующих сторон;
если два значения, то первая величина определяет срезы сверху и снизу, а вторая - слева и справа;
когда указаны три значения, первое создает срез сверху, второе – слева и справа, а третье – снизу;
при задании четырех значений, они определяют срезы соответственно сверху, справа, снизу и слева (т.е. по часовой стрелке).

При указании одного значения:

При указании двух значений:

Свойства border-image-repeat , border-image-width и border-image-outset позволяют задать каким образом эти области должны использоваться для формирования окончательной отрисовки границы.

border-image-width

Свойство border-image-width устанавливает толщину границы для изображения. По умолчанию имеет значение 1 (это означает, что она равна border-width ).

Если значение этого свойства задать больше, чем border-width , то тогда граница будет накладываться под внутренний контент элемента.

В border-image-width можно задать от одного до четырех значений:

при указании одного значения, все четыре границы будут иметь одну эту толщину;
при задании двух значений, первая величина будет определять толщину верхней и нижней границы, а вторая – левой и правой;
когда указаны три значения: первая величина будет задавать толщину верхней границы, вторая – левой и правой, а третья – нижней;
при задании четырёх значений: первая величина – за толщину верхней границы, вторая – правой, третья – нижней и четвёртая – левой (т.е. по часовой стрелке, начиная с верхней).

Задавать значение можно с помощью:

числа – в этом случае, толщина границы будет вычисляться как значение border-width умноженное на это число;
px и других единиц – в соответствии с указанными единицами;
процентов (%) – толщина границы будет вычисляться в процентах относительно размера блока;
ключевого слова auto – толщина границы берётся из border-image-slice (если подходящего размера нет, то используется то, что задано в border-width ).

Пример установки толщины границы для изображения в раза превышающей border-width :

border-image-outset

СSS-свойство border-image-outset задает расстояние, на которое нужно сместить границы наружу относительно их начального положения.

В border-image-outset можно задать от одного до четырёх значений:

при задании одного значения, оно применяется ко всем четырем сторонам;
если указаны два значения, то первое применяется к верхней и нижней границам, а второе - к левой и правой;
указании трёх значений, первое применяется к верхней границе, второе - к левой и правой, а третье - к нижней;
указаны четыре значения, они применяются к верхней, правой, нижней и левой границам в указанном порядке (по часовой стрелке).

Задавать значения можно с помощью:

px, em, rem и других CSS единиц - в этом случае смещение будет определяться в соответствии с этим значением;
числа – в этом случае расстояние будет равно этому число умноженное на значение border-width .

Пример, в котором сместим границы на величину, равную 1 * border-width :

border-image-repeat

CSS свойство border-image-repeat определяет как должны быть заполнены части границ, расположенные между углами в соответствии с областями 5 – 8 исходного изображения.

border-image-repeat может быть установлено с использованием одного или двух значений.

Когда указано одно значение, то оно применяет одно и то же поведение ко всем четырем сторонам. При задании двух значений, первое применяется к верхней и нижней сторонам, а второе - к левому и правому.

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

Как добавить рамку на элемент?

Просто добавим к блоку с классом element черную сплошную рамку толщиной 5 пикселей.

// CSS
.element width: 150px;
height: 150px;
background-color: powderblue;
border-style: solid; /* стиль рамки в виде сплошной линии */
border-width: 5px; /* толщина рамки */
border-color: black; /* цвет рамки */
>

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

.element .
border: solid 5px black;
>

Как добавить рамку на определенные стороны элемента?

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

.element .
border: solid 5px black;

// убирают ненужные обводки
border-bottom: none;
border-right: none;
border-bottom-style: none;
border-right-style: none;
>

И это еще не все, мы можем точечно менять ширину и цвет у рамки.

border-top-width: 10px;
border-left-color: coral;

Типы стилей у рамок

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

dashed

Значение dashed сделает рамку прерывистой.

dotted

Значение dotted превратит обводку в точки.

double

Значение double добавит двойную сплошную рамку.

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

groove

inset

outset

ridge

Как убрать рамку с элемента?

Убрать рамку с элемента можно тремя разными способами:

Установить значение border-style: none; (популярный)
Установить значение border-width: 0px; (малоиспользуемый)
Установить значение border-color: transparent; (нежелательно)

Помните, что прозрачный цвет не убирает рамку с элемента, а только делает невидимой и резервирует для неё место. Это хорошо видно в панели для разработчиков при наведении мыши на border в блочной модели элемента.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Здравствуйте! В этой серии уроков я бы хотел рассказать о тех моментах в CSS, которые то и дело возникают при создании сайтов. Каждый урок будет состоять из проблемы и решения и также ссылки где можно посмотреть готовый пример. И так начнем пожалуй с того как сделать полупрозрачную рамку у элемента на веб-странице.

Проблема

Предположим, что мы хотим для оформления контейнера использовать белый фон и полупрозрачную белую рамку, сквозь которую будет просвечивать основной фон. Наша первая попытка, вероятно, будет выглядеть примерно так:
border: 10px solid hsla(0,0%,100%,.5);
background: white;
Если у вас нет твердого понимания, как работают фоны и рамки, результат может шокировать. Куда делась рамка? И если невозможно достичь эффекта полупрозрачной рамки, используя полупрозрачный цвет для рамки, то как это вообще сделать?

Решение

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

Это не играет особой роли, когда вы используете сплошные непрозрачные рамки, но в нашем примере способно полностью изменить дизайн. Вместо полупрозрачной белой рамки, сквозь которую просвечивает прелестная фоновая картинка, мы получили полупрозрачную белую рамку на непрозрачном белом фоне, которую не отличить от обычной белой рамки. В CSS 2.1 фон именно так и работал. Нам нужно было просто смириться и продолжать жить с этим. К счастью, с появлением стандарта Backgrounds & Borders Level 3 мы обрели возможность корректировать поведение фона в соответствии с насущными требованиями дизайна, применяя для этого свойство background-clip. Его первоначальное значение равно border-box , что означает, что фон обрезается по краю ограничивающей рамки. Если мы хотим, чтобы наш фон не растягивался под рамку, то для этого всего лишь нужно присвоить свойству значение padding-box, которое приказывает браузеру обрезать фон по краю забивки:
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте также: