Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   border shadow в таблице (https://javascript.ru/forum/xhtml-html-css/63947-border-shadow-v-tablice.html)

rafaello 10.07.2016 17:48

border shadow в таблице
 
Здравствуйте уважаемые!
Прошу совета, как сделать...
В общем мне надо каждую ячейку <tr><td></td><td></td></tr> закрасить фон, то есть bgcolor="" или background-color:....;
При этом border сделать толщиной 3-4 пикселя, белого цвета.
Все это не сложно. Вопрос возникает, как сделать плавный переход (по типу box-shadow:...;) так, чтобы цвет фона, возле самого border плавно переходил в белый. В итоге, чтобы получились цветные ячейки таблицы с размытыми краями, плавно переходящими в белый цвет.
Спасибо!

rafaello 10.07.2016 21:19

Непонятно...
Что то не так спросил (глупый вопрос)
или
Это невозможно сделать такое?

Malleys 10.07.2016 21:58

Фоновая картинка linear-gradient
Код:

background-image:
  linear-gradient(
    to bottom,
    #fff,
    transparent 50px,
    transparent calc(100% - 50px),
    #fff
  ), linear-gradient(
    to left,
    #fff,
    transparent 50px,
    transparent calc(100% - 50px),
    #fff
  );

<html><head><style type="text/css">table {
    border-collapse: collapse;
    table-layout: fixed;
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
    background-color: #ff9800;
    background-image: url(http://www.spyderonlines.com/images/wallpapers/natural-hd-wallpaper/natural-hd-wallpaper-8.jpg);
    background-size: cover;
    width: 75%;
    height: 75%;
    margin: auto;
}

td {
    border: 4px solid #fff;
    background-image: linear-gradient(to bottom, #fff, transparent 50px, transparent calc(100% - 50px), #fff), linear-gradient(to left, #fff, transparent 50px, transparent calc(100% - 50px), #fff);
}

body {
    display: flex;
}</style></head><body>
  <table>
    <tbody><tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr></tbody></table></body></html>

rafaello 11.07.2016 10:03

Ух ты... здорово!!!
Я бы сам ни в жизни не сделал бы.
Спасибо.
Хотя...
Сейчас получается, что процесс перехода цвета linear-gradient происходит почти от центра ячейки таблицы. А хотелось бы, чтобы основная часть ячейки была закрашена цветом, а переход к другому цвету начинался бы возле самого бордера. Это можно как то регулировать?

Spass 20.07.2016 11:08

td {
    background: #39f;
    box-shadow: inset 0 0 20px #fff;
}


Часовой пояс GMT +3, время: 07:43.