代码:
效果图:
border-radius:
给元素添加圆形边框,四个值是左上顺时针旋转四个角。
transform:rotate(20deg):
元素旋转,20deg表示顺时针旋转20度
box-shadow:
向框添加阴影,box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。
inset可选。将外部阴影 (outset) 改为内部阴影。
伪元素
气球下面的揪是用伪元素做的。
content是激活伪元素,必需的。
display:block;是将此元素转化为块元素,以便指定元素位置,但是后面有
position:absolute;所以display:block;在这里是可以删除的。
这个伪元素没有设置大小,它的大小完全是由border撑起来的。将右边框设置颜色,其他边框设置 透明色(transparent)就能画出三角形,再添加圆边框(border-radius),形成揪的形状。