新会员白菜网送体验金前端开发
新会员白菜网送体验金用户体验

初识 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);  //创建矩形
注册就送10元(28)
未经允许不得转载:大前端 » 初识 CSS Shapes
分享到: 更多 (0)

评论 5

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

    This is a topic which is near to my heart… Cheers! Exactly where are your contact details though?

    DMC52小时前回复
  2. #4

    Looks realy great! Thanks for the post.

  3. #3

    After I originally commented I appear to have clicked on the -Notify me when new comments are added- checkbox and from now on whenever a comment is added I recieve four emails with the same comment. Perhaps there is a way you are able to remove me from that service? Cheers!

  4. #2

    Hi there, just became aware of your blog through Google, and found that it’s truly informative. I’ll be grateful if you continue this in future. Lots of people will benefit from your writing. Cheers!

    Karine Mary1个月前 (03-11)回复
  5. #1

    润体乳

    大雷5个月前 (11-30)回复

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

立即前往
博聚网