Антон Нагаец

Если не критично использовать outline то воспользуйтесь простым border-radius
Codepen

Генератор CSS 3D текста. поможет.

text-overflow Все уже придумано за нас.
Поддержка браузерами
Пример

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

Display:

table	Определяет, что элемент является блочной таблицей подобно использованию тега <table>.
table-row	Элемент отображается как строка таблицы (тег <tr>).
table-cell	Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).

codepen.io/gr1mm3r/pen/dMMRKV

Как один из вариантов решения

<nav>
<dl>
  <li><a href="#">menu1<a/></li>
  <li><a href="#">menu2<a/></li>
  <li><a href="#">menu3<a/></li>
  <li><a href="#">menu4<a/></li>
</dl>
</nav>

dl {
  display:flex;
  justify-content:center;
   
}
li {
  min-width:10vw;
  min-height:10vh;
 background:url(http://lorempixel.com/150/50);  
  list-style-type:none;
  padding:0.5vw;
  margin:0.5vw;
}
a {color:white; text-decoration:none; }

0) GRID! - это первое и незыблемое правило слаженной работы дизайнера и верстальщика. Если в макете присутствует сетка 50% вопросов решается.
1) Основы HTML CSS. Чтобы дизайнер понимал поведение элементов на странице.
2) Проблемы рендеринга браузеров и проблему идентичности пикселя. Опять же образно.
3) Понимание mobile-first и desktop-first это решит проблемы с версткой отрисованных макетов в плане позиций элементов.
4) Принцип работы анимации js/canvas, чтобы понимать что хрен верстак сделает 7 красных перпендикулярных линий превращающихся в котенка.

Немного поправил
Позиционирование элементов внутри блока теперь намного удобнее с flexbox. Крайне рекомендую.