БлогNot. Контур в CSS3: ещё одна лишняя рамка?

Контур в CSS3: ещё одна лишняя рамка?

В дополнение к классической модели элемента HTML следует нарисовать вокруг элемента ещё "контур" outline, применимый ко всем четырём сторонам сразу, не влияющий на положение блока и его ширину, но зато имеющий собственный "сдвиг" от элемента, записанный в свойстве outline-offset.

Почему на рисунке 2 outline-рамки "пересеклись" горизонтальными сторонами? Потому что 15+15 больше 20 :) Увы, в IE outline-offset не работает совсем.

outline-offset
outline-offset

Код этого примера:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Контур в CSS3</title>
 <style>
  .box {
   width: 90%px;
   max-width: 1000px;
   min-height: 96px;
   margin: 20px auto;
   border: 5px solid #ccc;
   padding: 10px;
   background-color: #eee;
   outline-color: red;
   outline-style: dashed;
   outline-width: 2px;
   outline-offset: 15px;
  }
 </style>
</head>
<body>
 <div class="box">Контур CSS3</div>
 <div class="box">Контур CSS3</div>
</body>
</html>

теги: html css ie

31.08.2019, 19:37; рейтинг: 40