色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3 橢圓繞

傅智翔1年前8瀏覽0評論

CSS3 提供了基于 elliptical layout 的文本排版方式,這種排版方式可以讓文本沿著橢圓形繞行,并且能夠設置橢圓的長軸和短軸,使得排版效果更加靈活。這一特性可通過 CSS 中的 "shape-outside" 屬性來實現。

.box {
shape-outside: ellipse(50% 50% at 50% 50%);
width: 200px;
height: 400px;
float: left;
margin-right: 20px;
background-color: #e3f2fd;
}

在上面的代碼中,我們給 ".box" 元素設置了"shape-outside: ellipse(50% 50% at 50% 50%)",這表示一個中心位于元素中心的橢圓形,其中長軸和短軸的半徑大小分別為50%。"at 50% 50%"表示這個橢圓形的中心與元素中心重合。這樣設置之后,我們在 ".box" 元素內添加文本,就會按照橢圓型排列。

需要注意的是,這一特性要求瀏覽器支持 CSS Shapes 特性,目前一些瀏覽器尚不完全支持該特性,如果需要兼容性更好的方案,可以考慮使用 SVG 或者 Canvas 實現類似效果。

除了橢圓形外,"shape-outside" 還支持圓形、多邊形等形狀,通過不同的參數組合,可以實現豐富多彩的排版效果。