CSS Reference: shape-outside

分享链接:tympanus.net/codrops/css_reference...

CSS 属性 shape-outside 用于控制浮动元素周围内容(通常是文本)的环绕效果。

比如,下面这个例子:

CSS Reference: shape-outside

图片内容虽然是圆形,但是图片元素本身是以矩形渲染的,只有借助 shape-outside,才能使周围文本呈现圆形的环绕效果。

shape-outside: circle(15em at 10% 40%) padding-box;

只有 shape-outside 还不够,因为它并不会影响元素的背景图片和边框的呈现效果:

CSS Reference: shape-outside

这时就需要借助 clip-path 属性了:

.element {
    float: left;
    width: 150px;
    height: 150px;
    shape-outside: polygon(50% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

最终的呈现效果如下:

CSS Reference: shape-outside

(完)

css
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!