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

初识 CSS Shapes —– (二)

上一篇主要介绍了通过函数方法创建矩形、圆等基本图形,今天主要了解盒模型、图片计算出来的形状。

1、盒模型(包括 border-radius 的弧度)

See the Pen shape-outside by cc (@glccgl) on CodePen.

2、url值-提取并计算指定 image的alpha通道得出形状,可通过shape-image-threshold设置阈值(需注意图片跨域问题)

.shape-img {
     float: left;
     width: 400px;
     height: 207px;
     shape-outside: url(./images/shape-img.png);
     shape-image-threshold: 0;
 }

效果下图:

3、渐变,可通过shape-image-threshold设置阈值

 

赞(27)
未经允许不得转载:大前端 » 初识 CSS Shapes —– (二)
分享到: 更多 (0)

评论 8

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

    there are professional career coaches out there that charges a small fee..

    Nonton Anime1个月前 (05-10)回复
  2. #7

    Wow, amazing blog format! How long have you been running a blog for? you made blogging look easy. The entire glance of your site is excellent, as smartly the content!

    cat blog1个月前 (05-08)回复
  3. #6

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Rocasea2个月前 (04-18)回复
  4. #5

    Your current blogs normally possess a lot of really up to date info. Where do you come up with this? Just saying you are very inspiring. Thanks again

    Albert Hupka2个月前 (04-08)回复
  5. #4

    Your style is really unique compared to other folks I have read stuff from. Thanks for posting when you have the opportunity, Guess I will just bookmark this site.

    Apex Legends Octane3个月前 (03-31)回复
  6. #3

    Cause of Arthritis… […]while the sites we link to below are completely unrelated to ours, we think they are worth a read, so have a look[…]…

    my singing monsters3个月前 (03-28)回复
  7. #2

    Salutation, maybe this is not on theme but anyway, I have been reading about your site and it looks truly tidy. impassioned about your activity. I’m building a new blog and hard put to make it appear great, and provide really good content. I have revealed much on your site and I look forward to more updates and will be coming back.

    Wilhelmina Dendy3个月前 (03-11)回复
  8. #1

    招聘:web前端,
    薪 资:12k–30k人民币,具体根据实际工作能力,专业面试评级确定。
    工作地点:泰国
    福利:正规工作签证、包食宿、团建聚餐、节假日活动,带薪回国休假报销来回机票
    其他岗位:安卓、IOS、java开发,软件测试
    联系方式:QQ2084458993
    微信:TH0631280401
    泰国电话:+66 0631280401

    青青4个月前 (02-22)回复

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

立即前往