css布局单个元素实现邮票效果代码-html代码-BFW代码库

css布局单个元素实现邮票效果代码

代码语言：html

代码描述：css布局单个元素实现邮票效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
@import url(https://fonts.bunny.net/css?family=uncial-antiqua:400);

* {
  box-sizing: border-box;
}

body {
  height: 100dvh;
  margin: 0;

  display: grid;
  place-items: center;

  background-color: hsl(120, 25%, 70%);
}

postage-stamp {
  display: block;
  position: relative;

  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  margin: 0.1rem;

  background-image: url("//repo.bfw.wiki/bfwrepo/image/5eedde0ecfa60.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90");
  background-size: cover;
  background-position: 70% 50%;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 1280' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000000' stroke-width='5.95107' d='m 30.89859,1278.0197 c -1.75218,-9.9035 -10.115763,-19.5045 -18.548616,-21.2928 -6.2336253,-1.3221 -6.5670948,-1.9616 -6.5670948,-12.5957 0,-10.5325 0.3371247,-11.2029 5.6348158,-11.2029 3.518569,0 8.402195,-2.9343 13.003412,-7.8133 5.93798,-6.2962 7.368597,-9.6083 7.368597,-17.0588 0,-11.3199 -7.98845,-22.4787 -18.059383,-25.2265 -5.9617282,-1.6267 -6.9523631,-2.9903 -7.5374971,-10.376 -0.5206757,-6.5719 0.2176209,-8.8088 3.2508536,-9.849 12.0823845,-4.1437 15.3863285,-6.3666 18.9373825,-12.7409 8.235469,-14.7829 -2.408424,-38.7308 -17.214284,-38.7308 -4.8363895,0 -5.3838968,-0.9348 -5.3838968,-9.192 0,-7.2168 0.8150935,-9.1955 3.7926611,-9.2074 5.3086947,-0.021 15.9678687,-7.8759 19.2821977,-14.2.........完整代码请登录后点击上方下载按钮下载查看