CSS исчезают границы без border-image? - PullRequest
Новая
       31

CSS исчезают границы без border-image?

0 голосов
/ 12 октября 2010

знает ли кто-нибудь о методе css-only (css3 - это хорошо, но желательно на всякий случай без border-image) для стилизации активной вкладки, такой как панель инструментов следующего диалогового окна (игнорируя значки): настройки кода на снегуleopard

Я использую jquery-ui для создания вкладок, что означает, что разметка похожа на: 

<div class="tabbed">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">...</div>
    ...
</div>

, пока у меня не появится лучший метод, я буду стилизоватьследующим образом (все классы ui-tabs- * автоматически генерируются плагином jQ-UI tabs): 

.ui-tabs-nav {
    background:-webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#a7a7a7)) repeat-x; padding:1px 4px;
}
.ui-tabs-nav li.ui-tabs-selected {
    border-width:0 1px; border-color:transparent rgba(0,0,0, 0.30) !important; padding:1px 0;
    background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0, 0)), color-stop(0.5, rgba(0,0,0, 0.1) ), to(rgba(0,0,0, 0))) repeat-x !important;
}
.ui-tabs-nav li.ui-tabs-selected > a {
    border-width:0 1px; border-color:transparent rgba(0,0,0, 0.15);
}

так как я могу получить градиентные границы без использования border-image?если мне действительно нужно изображение границы, может ли оно использовать несколько градиентов CSS в качестве содержимого?

Ответы [ 4 ]

1 голос
/ 12 октября 2010

Почему бы вам просто не использовать градиентное фоновое изображение со средней непрозрачностью.Примерно так должно работать (кроме замены шестнадцатеричных цветов на rgba - со средней альфой.

background-image: -webkit-Gradient (линейный, 0% 0%, 100% 0%, из (# 777777), до (# 777777), остановка цвета (.10, # FFFFFF), остановка цвета (.90, # FFFFFF))

0 голосов
/ 04 октября 2015

Попробуйте это: box-shadow: 0 0 15px 3px gray; box-shadow: 0 0 15px strength color;

0 голосов
/ 12 октября 2010

CSS3 градиент обычно обрабатывается как изображения.

Для использования градиентов на фоне простого элемента вы должны объявить градиент как background-image вместо просто background-color.

Попробуйте применить то же правило к border-image. Но помните, что изображение границы имеет слабую поддержку большинства браузеров (даже Opera и Chrome).

0 голосов
/ 12 октября 2010

Самым простым решением может быть создание нескольких изображений с таким же эффектом, а затем использование их в качестве фоновых изображений.

Другое решение заключается в размещении каждого элемента меню внутри диапазона и создании градиентного фона.пролетЗатем необходимо расширить элемент меню, чтобы заполнить интервал, достаточный для того, чтобы он выглядел так, будто вокруг элемента меню есть граница.Дешево и немного хакерски, но это работает.

...