Полупрозрачная рамка

Используя полупрозрачную рамку, не забываем указать background-clip:padding-box, чтобы фон элемента не портил эффект полупрозрачности.

.container{background:green;}
.block{
  background:yellow; 
  border:10px solid hsla(0, 0%, 100%, 0.5); background-clip:padding-box;
}

Несколько рамок

Добавить элементу несколько рамок поможет свойство box-shadow и его параметр spread radius (радиус размазывания).

.block{
  background:#eee; 
  box-shadow:0 0 0 10px green, 
        0 0 0 15px aqua, 
        0 0 0 25px blue;
}

Двойная рамка

Не забываем и про контур элемента outline, который дает простор для творчества в оформлении рамок.

.block{
  background:darkblue; 
  border:3px solid white;
  outline:3px dashed white;
  outline-offset:-15px;
}

Внутреннее скругление

Скругленные внутренние углы при обычных внешних достигаются сочетанием свойств border-radius, box-shadow и outline. Эффект основан на том, что контур outline в большинстве браузеров не наследует скругление углов. Однако в ближайшем будущем этот стандарт может измениться. Кроме того необходимо тщательно подбирать толщину рамок, чтобы одна не выглядывала из-под другой.

.block{
  background:orange;
  border-radius:15px;
  padding:10px;
  box-shadow:0 0 0 8px red;
  outline:10px solid red;
}

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован