css 圆角蒙版_简单CSS蒙版：带有圆角的图像

css 圆角蒙版

Most web designers use use border-radius for rounding the corners on navigation buttons, div containers and the like. With a little bit of creativity we can also apply the property to images, to create the effect of a simple mask.

大多数Web设计人员使用border-radius来使导航按钮， div容器等上的角变圆。 通过一点点创造力，我们还可以将该属性应用于图像，以创建简单蒙版的效果。

First, let’s take an image and apply a standard border to it via a class.

首先，让我们拍摄一张图像，并通过class为其应用标准边框。

.ghost-town {
	width: 350px; height: 263px;
	border: 2px solid red;
}

Then, add a border-radius of a few dozen pixels to curve the corners:

然后，添加几十个像素的border-radius以弯曲拐角：

.ghost-town {
	width: 350px; height: 263px;
	border: 2px solid red;
	border-radius:30px;
}

To smooth the effect, apply

overflow: hidden while making the border transparent. I'll also add a subtle box-shadow and a slight rotation:

overflow: hidden在使边框透明的同时将其overflow: hidden 。 我还将添加一个微妙的box-shadow和轻微的旋转：

.ghost-town {
	width: 350px; height: 263px;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	transform: rotate(4deg) translateZ(0);
}

The (now invisible) border clips the corners of the image nicely, while the translateZ works to smooth the rendering of the rotated image.

(现在不可见)边框很好地裁剪了图像的角，而translateZ可以平滑旋转图像的渲染。

We could extend this to create the ever-popular “faces inside circles” motif shown at the top of this page. In this case, I'll size a container element and place the visual content as a background-image within it:

我们可以对其进行扩展，以创建此页面顶部所示的受欢迎的“圆圈内的面Kong”主题。 在这种情况下，我将调整容器元素的大小并将视觉内容作为background-image放置在其中：

.happyface {
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #000;
    width: 13rem;
    height: 13rem;
    background-image: url('happy-face.jpg');
    background-size: cover;
}

By sizing the border-radius as 50%, and making the container equal in width and height, we create the impression of perfect circles.

通过将border-radius为50％，并使容器的宽度和高度相等，我们可以创建完美的圆形效果。

翻译自: https://thenewcode.com/431/Simple-CSS-Masks-Images-with-Rounded-Corners

css 圆角蒙版