To avoid the use of an additional element, you can use css pseudo-elements. Try this demo.
#chatroom {
position: relative;
}
#chatroom:before {
content: "";
/* Expand element */
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
-moz-box-shadow: inset 0 0 8px rgba(0,0,0,.55);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.55);
box-shadow: inset 0 0 8px rgba(0,0,0,.55);
/* Disable click events */
pointer-events: none;
}
Basically this css creates that additional element for you. Notice the pointer-events:none
to allow click events to pass through this element.
Keep in mind that pointer-events:none
doesn't work well on some mobile devices regarding touch scrolling (clicking/taping works well). I ended up not using inset shadows at all because of this.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…