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. |