Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
belltone
3 / 3 / 5
Регистрация: 09.08.2012
Сообщений: 216
1

Убрать цвет подложки меню при использовании border-radius

27.10.2016, 03:53. Просмотров 269. Ответов 3
Метки нет (Все метки)

Как устранить данный дефект выделил на фото видно что просвечивает задний фон в углу это выглядит не эстетично:

HTML5
1
2
3
4
5
6
7
8
9
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#nav {
    font: 16px 'OpenSans-Semibold', sans-serif;
    background-color: #efefef;
    background: url("http://i67.tinypic.com/24y0mzs.gif") repeat-x,
                url("http://i65.tinypic.com/ivx008.gif") repeat-x bottom;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -khtml-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}
#nav ul li {
    text-transform: uppercase;
    float: left;
    display: block;
}
#nav li:first-child a {
    -moz-border-radius: 10px 0 0 0;
    -webkit-border-radius: 10px 0 0 0;
    -khtml-border-radius: 10px 0 0 0;
    border-radius: 10px 0px 0 0;
}
#nav li:last-child a {
    border-right: 0;
}
#nav a {
    color: #1d1d1d;
    text-decoration: none;
    padding: 29px 34px 29px 34px;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid  #e3e3e3;
    display: block;
}
#nav a:hover {
    color: #ffffff;
    background: #363636;
    background-image: -webkit-linear-gradient(bottom, #363636, #454545);
    background-image: -moz-linear-gradient(bottom, #363636, #454545);
    background-image: -o-linear-gradient(bottom, #363636, #454545);
    background-image: -ms-linear-gradient(bottom, #363636, #454545);
    background-image: linear-gradient(to top, #363636, #454545);
    border-right: 1px solid transparent;
    border-bottom: 1px solid #303030;
}
Убрать цвет подложки меню при использовании border-radius
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
27.10.2016, 03:53
Ответы с готовыми решениями:

Убрать border-radius
Не могу убрать бордер радиус ... не знаю почему -_-

Border-radius, hover, меню
Добрый вечер. Мне необходимо создать меню, вокруг которого при наведении должна...

Некорректная работа свойств border и border-radius на мобильных устройствах
Доброго времени суток, произошла интересная вещь: использовала...

Border-radius выделывается в IE, стороны округляет, но при этом не прячет содержимое углов
Доброго времени суток Уважаемые форумчане. Просьба помочь с куском верстки....

border-radius в IE
как сделать border-radius и box-shadow в IE???

3
mat777
0 / 0 / 0
Регистрация: 06.08.2013
Сообщений: 135
27.10.2016, 07:09 2
Пробовал менять значения radius?
0
belltone
3 / 3 / 5
Регистрация: 09.08.2012
Сообщений: 216
27.10.2016, 17:24  [ТС] 3
От этого ничего не меняется всё также остаётся зазор.

Думаю надо как-то сделать так чтобы первый элемент из списка внутри родителя наследовал от него свойство border-radius автоматически а не прописывать его в ссылке может в этом проблема.

Неужели больше нет никаких вариантов решить данную проблему, почему так происходит.
0
mrtoxas
Модератор
Эксперт HTML/CSS
2573 / 1905 / 1186
Регистрация: 12.07.2015
Сообщений: 5,121
Записей в блоге: 3
28.10.2016, 22:18 4
У меня не получилось вопроизвести проблему. Забил ваш код в песочницу, поставил body черный цвет, все ок, дефекта нет
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
28.10.2016, 22:18

border-radius и IE
Вот мой CSS-код: -moz-border-radius: 7px; -webkit-border-radius: 7px;...

border-radius В ie8
Вот собственно, надо подружить border-radius и IE 8. Нашел в инте PIE css3...

Border-radius не работает
Есть сайт с html: &lt;!Doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru