Mwongozo wa CSS shape-outside

Dingyi he yongfa

shape-outside Shuxing xuanze ni wei hangnei neirong dingyi baozhu xingzhuang。Mudaizhi xing，Hangnei neirong hui yuanzhui qi waibianju kuang jinxing baozhu，Ertong shi shi shape-outside，Nin keyi ziding yong zhe zhong baozhu fangshi。

shape-outside Shuxing dingyi le fudong yuanzhu de fudong quyu. Zhe ge fudong quyu dingyi le hangnei neirong fudong yuanzhu yuanzhui qi jinxing baozhu de xingzhuang.

Shili

Rang hangnei neirong yuanzhui tuxiang yi xingxing huanrao:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

Zi jin shi shi

CSS yanfa

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;

Shuxing zhi

Zhi Miaoshu
none Mudaizhi. Fudong quyu bu shouyi yingxiang. Hangnei neirong yuanzhui yuanzhu dizhi de waibianju kuang jinxing baozhu.
margin-box Dingyi you waibianju wai bianyuan baohuan de xingzhuang.
border-box Dingyi you biankuo wai bianyuan baohuan de xingzhuang.
padding-box Dingyi you nei bianju wai bianyuan baohuan de xingzhuang.
content-box

Dingyi you neirong bianyuan baohuan de xingzhuang.

Zhihe zhe ge kuang de meige jiao jingju wei 0 huo border-radius - border-width - padding zhong de zuidaguo zhi.
basic-shape Fudong quyu jiyu inset()、circle()、ellipse() huo polygon() hanshu de xingzhuang.
url(image) Fudong quyu jiyu zhiding tuxiang de alpha tongdao, you shape-image-threshold defined.
initial Jiang zhe ge shuxing shezhi wei tā de mudaizhi. Cankao initial.
inherit Cong qiji yuanzhu dizhi chuanji zhe ge shuxing. Cankao inherit.

Jishu xiaoxi

Mudaizhi: none
Chengxiangxing: No
Donghua zuozuo: yes for basic-shape. Read about animatable
Banben: CSS Shapes Module Level 1
JavaScript yanfa: object.style.shapeOutside="circle(50%)"

Liulanqi zhichi

Jinjiaozhong de shuzi biaoshi shouyi quanmian zhichi zhe ge shuxing de liulanqi banben.

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24