html如何实现阴影效果图,纯CSS可否实现如下表格的阴影效果？

Document

table, td { border: 1px solid #000; }

tr { cursor: pointer; }

tr.active { color: #f00; }

tr.shadow {

background-color: #fff;

box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);

}

aa	11
bb	22
cc	33
dd	44
ee	55
ff	66
gg	77

var tr = document.querySelectorAll('tr');

for (var i = 0, len = tr.length; i < len; i++) {

tr[i].index = i;

tr[i].maxLength = tr.length - 1;

tr[i].addEventListener('click', function () {

if (this.classList.contains('active')) {

this.classList.remove('active', 'shadow');

if (this.previousElementSibling && this.previousElementSibling.classList.contains('active')) {

this.previousElementSibling.classList.add('shadow');

}

} else {

this.classList.add('active');

if (this.index === this.maxLength || !this.nextElementSibling.classList.contains('active')) {

this.classList.add('shadow');

}

if (this.previousElementSibling && this.previousElementSibling.classList.contains('active')) {

this.previousElementSibling.classList.remove('shadow');

}

}

});

}