Как сделать прозрачную рамку в css
Перейти к содержимому

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

  • автор:

Рамка | CSS

CSS рамку можно реализовать с помощью двух свойств border и outline.

border CSS

border: border-width border-style border-color;

Свойство border-style

border: solid;
border: dotted;
border: dashed;
border: double;
border: groove;
border: ridge;
border: inset;
border: outset;
border: none;
div < border-style: none; height: 25em; > /* или */ div < border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; height: 25em; >

Свойство border-color

По умолчанию border-color совпадает с color (цвет текста)

color: ; border: solid #222222;

Чтобы сделать прозрачную рамку достаточно цвет написать в rgba: теория, конвертер.

div < border-style: none; border-color: #222222; height: 25em; > /* или */ div < border-style: none; border-top-color: #222222; border-right-color: #222222; border-bottom-color: #222222; border-left-color: #222222; height: 25em; >

Свойство border-width

border-width может быть указан в любых единицах измерения, но не в процентах. А также

border: thin solid;
border: medium solid;
border: thick solid;
div < border-style: none; border-color: #222222; border-width: 3px; height: 25em; > /* или */ div < border-style: none; border-color: #222222; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; height: 25em; >

Другое написание, где для каждой стороны есть своё свойство

div < border-top: 3px none #222222; border-right: 3px none #222222; border-bottom: 3px none #222222; border-left: 3px none #222222; height: 25em; >

Как рассчитывается ширина элемента HTML. В чём разница между border и outline

margin: 30px; padding: 15px; width: 100px;
outline-width: 10px; или border-width: 10px;

содержимое

Ширина = 60 margin + 30 padding + 100 width.

содержимое

Ширина = 60 margin (40 + 20 outline) + 30 padding + 100 width.

содержимое
Ширина = 60 margin + 20 border + 30 padding + 100 width.

margin, padding, outline, border при расчётах ширины нужно удвоить, поскольку учитываются и левая, и правая стороны. Поочерёдно наведите курсор на две ссылки в предыдущем предложении. Другой пример почему происходит смещение в div

width: 500px;
width: 250px;
width: 250px;
width: 500px;
width: 250px;
width: 250px;
border: solid;

Внеся box-sizing: border-box; border не будет увеличивать ширину и высоту блока
width: 500px;
width: 250px;

width: 250px;
border: solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Также как и padding, его нужно учитывать в height и width
width: 500px;
width: 250px;

width: 250px;
border: solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;

Как сделать рамку из нескольких цветов HTML

содержимое

  
содержимое

http://shpargalkablog.ru/2013/01/skachet-menu.html

CSS прозрачная картинка

  

10 комментариев:

Анонимный Ничего особенного здесь нет! Инфа устарела уже на лет 8..как минимум. NMitra А какую рамку вы хотите? Что вы ожидали увидеть? Что значит устарела? Вы не пользуетесь свойством border?

Как добавить рамку к изображению при наведении?

Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img . Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover, как показано в примере 1.

Пример 1. Добавление рамки

Рамка

Результат данного примера показан на рис. 1.

Изображение с рамкой

Рис. 1. Изображение с рамкой

Свойство border влияет на общие размеры изображения, из-за чего при наведении на картинку происходит её сдвиг. Есть несколько методов, как обойти эту особенность.

Использование outline

Свойство border заменяем на свойство outline, которое обладает схожим поведением, но не оказывает влияния на размеры (пример 2).

Пример 2. Свойство outline

Рамка

Прозрачная рамка

Устранить сдвиг картинки поможет прозрачная рамка то же толщины, что указана в border . Картинки предварительно выводим с прозрачной рамкой, а уже в :hover меняем у этой рамки цвет (пример 3). Тогда при наведении на изображение никаких смещений уже не будет. Для прозрачного цвета используем значение transparent , а цвет рамки меняется с помощью свойства border-color.

Пример 3. Прозрачная рамка

Рамка

Результат данного примера показан на рис. 2.

Изображение с рамкой

Рис. 2. Изображение с рамкой

См. также

  • :focus для полей формы
  • border
  • border-bottom-color
  • border-color
  • border-left-color
  • border-radius
  • border-right-color
  • border-top-color
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • Блочные элементы
  • Граница в CSS
  • Добавление треугольника
  • Колесо для сокращённых свойств
  • Круглые изображения
  • Открываем блочную модель
  • Оформление кнопок
  • Оформление ссылок
  • Повёрнутые рамки
  • Рамка вокруг изображений
  • Свойство border
  • Состояния кнопок
  • Строчные элементы

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

Здравствуйте! Хочу сделать вот такую кнопку — imgur.com/BtsmKSI, но столкнулся с проблемой: не знаю, как сделать её(рамку) прозрачной, не всю, а только ту часть, которая расположена поверх картинки. Вот мой CodePen — codepen.io/anon/pen/RNYVyO

  • Вопрос задан более трёх лет назад
  • 5490 просмотров

Комментировать

Решения вопроса 1

isqua

Научу HTML, CSS, JS, BEM и Git

По-моему, на скриншоте как раз вся рамка прозрачная, просто половина её на белом фоне.

Ответ написан более трёх лет назад

Нравится 2 1 комментарий

vitali1024 @vitali1024 Автор вопроса

Действительно, так оно и есть. Сам создал проблему из ничего 🙂

Ответы на вопрос 3

Web/Android developer

Добавляете помощника :after (или просто после кнопки в ручную), с прозрачным фоном и позиционируете как вам нужно.
Нет возможности указать прозрачность половине границы, целая сторона только

Ответ написан более трёх лет назад

Комментировать

Нравится Комментировать

slaven1707 @slaven1707

border: rgba(0,0,0, 0.5) / 0,0,0 — это черный цвет в системе rgba, а 0.5 — это значение прозрачности

Ответ написан более трёх лет назад

Прозрачная обводка (border)

Всем привет. Верстаю сайт. Создаю веб-дизайн для сайта и столкнулся с такой проблемой, что необходимо сделать прозрачную обводку border div блока. Такой вариант нужен, так как фон динамичный и обводка блоков должна подходить под фон. Первое, что пришло в голову, это сделать новый блок под основным блоком, ему задать background-image картинку png формата с прозрачностью 50%. нижний блок сделать шире и выше на 2 пх. После с помощью margin-top: -1px; margin-left: -1px; сместить нижний блок. Вариант работающий. Но при помощи resize браузера происходят баги — смещение нижнего блога в произвольную сторону. Так же, мне кажется, этот метод довольно не удобный. Как можно реализовать прозрачную обводку. Заранее спасибо.

Отслеживать

8,667 18 18 золотых знаков 74 74 серебряных знака 182 182 бронзовых знака

задан 29 мар 2012 в 15:38

967 5 5 золотых знаков 23 23 серебряных знака 54 54 бронзовых знака

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

.roundedBox

Отслеживать

ответ дан 29 мар 2012 в 15:53

3,059 27 27 серебряных знаков 49 49 бронзовых знаков

Спасибо, конечно. Но сделал альтернативный и РАБОТАЮЩИЙ вариант: box-shadow: 0 0 1px rgba(0, 0, 0, 0.80);

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *