跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多。
OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP，带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕。
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕或安装APP。
  3. 轻敲安装进行确认。
  • 选择语言

CSS Image Shapes

Cavalry
在 教程

推荐的帖子

  • 行政经理

CSS Image Shapes

With CSS it is easy to shape (clip) images to circles, ellipses and polygons.

CSS clip-path Property and the circle() Function

The clip-path property lets you clip an element to a basic shape.

The circle() function defines a circle with a radius and a position.

Here we clip an image to a circle with 50% radius:

Pineapple

Example

Clip an image to a circle with 50% radius:

img {
  clip-path: circle(50%);
}
Try it Yourself »

We can also specify the center of the circle. This can be a length or percentage value. It can also be a value such as left, right, top, or bottom. The default value is center.

Here we clip an image to a circle with 50% radius and position the center of the circle to the right:

Pineapple

Example

Clip an image to a circle with 50% radius and position the center of the circle to the right:

img {
  clip-path: circle(50% at right);
}
Try it Yourself »

CSS shape-outside and circle()

The shape-outside property lets you define a shape for the wrapping of the inline content.

The circle() function defines a circle with a radius and a position.

Here we clip an image to a circle with 40% radius, and set the shape-outside to a circle with 45% radius (to shape the text):

Pineapple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed efficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis.

Example

Use of circle(), clip-path and shape-outside:

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

CSS clip-path and ellipse()

The clip-path property lets you clip an element to a basic shape.

The ellipse() function defines an ellipse with two radii x and y.

Here we clip an image to an ellipse with 50% radius x and 35% radius y:

Pineapple

Example

Clip an image to an ellipse with 50% radius x and 35% radius y:

img {
  clip-path: ellipse(50% 35%);
}
Try it Yourself »

We can also specify the center of the ellipse. This can be a length or percentage value. It can also be a value such as left, right, top, or bottom. The default value is center.

Here we clip an image to an ellipse with 50% radius x and 35% radius y, and position the center of the ellipse to the right:

Pineapple

Example

Clip an image to an ellipse with 50% radius x and 35% radius y, and position the center of the ellipse to the right:

img {
  clip-path: ellipse(50% 35% at right);
}
Try it Yourself »

CSS shape-outside and ellipse()

Here we clip an image to an ellipse with 40% radius x and 50% radius y, and set the shape-outside to an ellipse with 45% radius x and 50% radius y (to shape the text):

Pineapple

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed efficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis.

Example

Use of ellipse(), clip-path and shape-outside:

img {
  float: left;
  clip-path: ellipse(40% 50%);
  shape-outside: ellipse(45% 50%);
}
Try it Yourself »

CSS polygon() Function

The polygon() function defines a polygon.

This function contains points that define the polygon. This can be a length or percentage value. Each point is a pair of x and y coordinates. 0 0 defines the left top corner and 100% 100% defines the right bottom corner.

The polygon() function is used within the clip-path property and the shape-outside property.

Here we clip an image to a polygon: 

Pineapple

Example

Clip an image to a polygon:

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
Try it Yourself »

CSS Properties and Functions

The following table lists the CSS properties and functions used in this chapter:

Property/Function Description
clip-path Lets you clip an element to a basic shape or to an SVG source
shape-outside Lets you define a shape for the wrapping of the inline content
circle() Defines a circle with a radius and a position
ellipse() Defines an ellipse with two radii x and y
polygon() Defines a polygon

  • 引用

    • 参与讨论

    你可立刻发布并稍后注册。 如果你有帐户，立刻登录发布帖子。

    游客
    回帖…
    转到主题列表

    帐户

    导航

    搜索

    搜索

    配置浏览器推送通知
    Chrome (安卓)
    1. 轻敲地址栏旁的锁形图标。
    2. 轻敲权限 → 通知。
    3. 调整你的偏好。
    Chrome (台式电脑)
    1. 点击地址栏中的挂锁图标。
    2. 选择网站设置。
    3. 找到通知选项并调整你的偏好。