[Помогите] Двойной рамкой в CSS с промежутком в середине?

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Styler247, 20 сен 2013.

  1. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    Можно ли как-то создать двойной рамкой в CSS, с этими настройками 2?:

    1) Одна линия немного толще, чем другие
    2) Существует небольшой разрыв между линиями

    Пример того, что мне нужно:
    [​IMG]
     
  2. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Самый простой способ это создать два <div> и задать им стили.
    Одному толстую рамку с paddingom, а другому тонкую.
     
  3. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    Да, я знаю, что это очевидный метод, но я не хочу, чтобы изменить HTML, потому что это оригинальные OpenCart HTML кода. Там должен быть способ сделать это через CSS только.
     
  4. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Тогда используйте вот такие штуки)
    Вариант 1 я уже написал выше.

    Вариант 2:
    border:1px solid red;
    outline:5px solid #ccc;

    Вариант 3:
    .block{
    border: solid 6px #fff;
    position: relative;
    z-index: 1;
    }
    .block:before {
    content: "";
    display: block;
    position: absolute;
    top: -12px;
    left: -12px;
    border: solid 6px #888;
    width: 312px;
    padding-bottom: 12px;
    min-height: 100%;
    z-index: 10;
    }

    Вариант 4:
    .block{
    box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
    }
     
  5. TopRaN

    TopRaN

    Регистрация:
    17 сен 2013
    Сообщения:
    15
    Симпатии:
    2
    Вариант №5 , нарисовать такие линии в фотошопе и в css использовать как картинку. + в том что не нужно будет хаки под разные браузеры писать
     
  6. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    Алекс, спасибо за вашу помощь. Однако есть одно дополнительное условие, что я забыл упомянуть. Я только хочу, чтобы показать двойную рамку на верхней стороне. Я не хочу, чтобы показать его слева, справа и снизу.

    Может ли это измениться быть включены в любой один из ваших вариантов тоже?
     
  7. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Примерно так
    .block{
    border-top:1px solid red;
    outline-top:5px solid #ccc;
    border-left:1px solid red;
    border-right:1px solid red;
    border-bottom:1px solid red;
    }
     
  8. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    Это не двойной рамкой. Я вижу только одну границу: http://codepen.io/anon/pen/fbGKi

    Кроме того, я ничего не хочу на левой, правой и нижней сторонах.