CSS3 box-shadow при наведении в сочетании с частичной ошибкой границы радиуса в Chrome - PullRequest
Новая
       26

CSS3 box-shadow при наведении в сочетании с частичной ошибкой границы радиуса в Chrome

0 голосов
/ 31 августа 2018

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

enter image description here

Появляется в Chrome 70.0.3534.4 на Win10 Вот фрагмент: 

#test {
  width: 300px;
  height: 70px;  
  border: 1px solid #ccc;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
#test:hover {
  box-shadow: 0 0 4px 0 #000;
}
<div id="test"></div>

Может быть, кто-нибудь знает обходной путь для этого?

1 Ответ

0 голосов
/ 01 сентября 2018

Возможно, вы используете свойство border-radius ... Пробовали ли вы эту сокращенную версию:

border-radius: 5px 5px 0 0;

Это выше делает то же самое, что у вас есть: border-top-left-radius: 5px; и border-top-right-radius: 5px;

Объяснение этой сокращенной версии:

border-radius: 5px 5px 0 0;

первый 5px в этом выражении предназначен для top left, второй 5px равен top right, первый 0 равен bottom right, а последний 0 равен bottom left.

Это предпочтительный способ написания border-radius, так как он использует только 1 строку кода, вместо того, чтобы иметь дополнительные строки кода только для радиуса границы - делайте больше, пишите меньше:)

Я не проверял это на Chrome версии 70+, так как моя версия 68.xxx, и я не могу обновить, так как в нем говорится, что браузер уже обновлен ...

...