关注前端开发
关注用户体验

初识 CSS Shapes

先来看以下效果:右侧文本环圆环排版。

在未了解css shapes之前,实现这样的排版还是挺费事的,比如为每行设置不同的padding值。但是有了css shapes之后,两行css就搞定啦,一起来看看吧。

 

See the Pen css-shapes by cc (@glccgl) on CodePen.

实现以上效果的主要属性是shape-outside,该属性使用形状值来定义浮动区域的浮动,这将使得内联内容环绕着形状,而不是产生浮动的边框。可以通过图形函数来定义基本形状。

shape-outside: circle(arg)  //创建圆
shape-outsidepolygon(arg); //创建多边形
shape-outside: ellipse(arg);  //创建椭圆
shape-outside: inset(arg);  //创建矩形
赞(14)
未经允许不得转载:大前端 » 初识 CSS Shapes
分享到: 更多 (0)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    润体乳

    大雷2周前 (11-30)回复

themebetter 国内更好的WordPress主题服务商

立即前往