border shadow в таблице
Здравствуйте уважаемые!
Прошу совета, как сделать... В общем мне надо каждую ячейку <tr><td></td><td></td></tr> закрасить фон, то есть bgcolor="" или background-color:....; При этом border сделать толщиной 3-4 пикселя, белого цвета. Все это не сложно. Вопрос возникает, как сделать плавный переход (по типу box-shadow:...;) так, чтобы цвет фона, возле самого border плавно переходил в белый. В итоге, чтобы получились цветные ячейки таблицы с размытыми краями, плавно переходящими в белый цвет. Спасибо! |
Непонятно...
Что то не так спросил (глупый вопрос) или Это невозможно сделать такое? |
Фоновая картинка linear-gradient
Код:
background-image:
<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>
|
Ух ты... здорово!!!
Я бы сам ни в жизни не сделал бы. Спасибо. Хотя... Сейчас получается, что процесс перехода цвета linear-gradient происходит почти от центра ячейки таблицы. А хотелось бы, чтобы основная часть ячейки была закрашена цветом, а переход к другому цвету начинался бы возле самого бордера. Это можно как то регулировать? |
td {
background: #39f;
box-shadow: inset 0 0 20px #fff;
}
|
| Часовой пояс GMT +3, время: 07:43. |