Как угаснуть край div только с помощью CSS?

Ответ 1

Пример кода: http://codepen.io/anon/pen/sbHAc/

Соответствующий CSS

ol {
  border   : 1px #d8d8d8 dashed;
  position : relative;
}

ol:after {
  content  : "";
  position : absolute;
  z-index  : 1;
  bottom   : 0;
  left     : 0;
  pointer-events   : none;
  background-image : linear-gradient(to bottom, 
                    rgba(255,255,255, 0), 
                    rgba(255,255,255, 1) 90%);
  width    : 100%;
  height   : 4em;
}

Результирующий эффект

если браузер поддерживает свойство pointer-events (все основные браузеры, кроме IE<=10), тогда текст под градиентом будет также доступен для выбора/кликабель.

Ответ 2

<style>
.fade {
    position: relative; 
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
}
</style>

Вот вам пример http://jsfiddle.net/nrgx7/

Ответ 3

Я (лично) считаю, что использование вторичного элемента как "перекрытия" работает очень хорошо. Я делаю это, определяя новый tag. Это позволяет легко добавить желаемый эффект выцветания к любому элементу, который вы хотите использовать <fade/> в конце.

div {
    position: relative;
}

fade {
    position: absolute;
    bottom: 0px;

    display: block;
  
    width: 100%;
    height: 50px;
  
    background-image: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0), 
        rgba(255, 255, 255, 0.9)
    100%);
}

<div>
    text
    <br>
    text
    <br>
    text
    <fade/>
</div>

Ответ 4

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