Границы "Fade" в CSS

Я использую border-left: groove для элемента, но хочу, чтобы граница "затухала" в фоновом режиме, поскольку она заканчивается внизу.

Надеюсь, у меня есть смысл. Как я могу добиться чего-то в этом отношении?

Ответ 1

Вы можете указать градиенты для цветов при определенных обстоятельствах в CSS3, и, конечно, для границ можно задать цвет, поэтому вы должны иметь возможность использовать градиент в качестве цвета границы. Это может включать в себя возможность указания прозрачного цвета, что означает, что вы должны быть в состоянии достичь желаемого эффекта.

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

Быстрый Google нашел эти две страницы, которые должны помочь вам на вашем пути:

Надеюсь, это поможет.

Ответ 2

Вы также можете использовать свойство box-shadow с более высоким значением blur и rgba() для установки уровня прозрачности. Похоже, лучший выбор в вашем случае.

box-shadow: 0 30px 40px rgba(0,0,0,.1);

Ответ 3

Добавьте class css в таблицу стилей

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

установите width в width вашего изображения. и используйте html для изображения

<div class="border_gradient">
        <img src="image.png" />
</div>

хотя он может не дать точной границы, на градиенте будет отображаться некоторый градиент.

источник: границы CSS3