当我们想给一个矩形或者其他能用border-radius生成的形状加投影时，box-shadow的表现都很棒的。但是，当元素添加可一些伪元素或半透明的装饰之后，border-radius会无视这些。
这是原本的图形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
vertical-align: bottom;
box-sizing: border-box;
width: 5.9em;
height: 5.2em;
margin: .6em;
background: #fb3;
font: 200%/1.6 Baskerville, Palatino, serif;
text-align: center;
}
.speech{
border-radius: .3em;
}
.speech:before{
content: '';
position: absolute;
top: 1em;
right: -.7em;
width: 0;
height: 0;
border: 1em solid transparent;
border-left-color: #fb3;
border-right-width: 0;
}
.dotted{
background: transparent;
border: .3em dotted #fb3;
}
.cutout {
border: .5em solid #58a;
border-image: 1 url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"\
width="3" height="3" fill="%23fb3">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');
background-clip: padding-box;
}
</style>
</head>
<body>
<div class="speech">Speech bubble</div>
<div class="dotted">Dotted border</div>
<div class="cutout">Cutout corners</div>
</body>
</html>