css画气球

代码:

效果图:

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),形成揪的形状。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,655评论 0 7
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,788评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,327评论 0 11
  • 一、HTML5 1.1 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定...
    福尔摩鸡阅读 16,071评论 14 51
  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 2,285评论 0 1