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

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

评论 8

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

    I was on Twitter looking for Neiko Air Tools when I found a link to this blog, happy I stopped by – Cheers

    Laverne Off1个月前 (05-13)回复
  2. #7

    This is the appropriate weblog for wishes to be made aware of this topic. You already know a great deal its nearly not easy to argue along (not that I really would want…HaHa). You certainly put a different spin with a topic thats been revealed for years. Excellent stuff, just great!

    Nonton Anime1个月前 (05-11)回复
  3. #6

    You ought to get involved in a contest for starters of the most useful blogs online. I am going to suggest this blog!

    cat tales1个月前 (05-08)回复
  4. #5

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

    DMC52个月前 (04-24)回复
  5. #4

    Looks realy great! Thanks for the post.

    Littekens verminderen2个月前 (04-19)回复
  6. #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!

    Apex Legends Octane3个月前 (03-31)回复
  7. #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 Mary3个月前 (03-11)回复
  8. #1

    润体乳

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

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

立即前往