css实现自定义不规则边框效果代码-html代码-BFW代码库

css实现自定义不规则边框效果代码

代码语言：html

代码描述：css实现自定义不规则边框效果代码

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Prata Regular'), local('Prata-Regular'), url(https://fonts.gstatic.com/s/prata/v13/6xKhdSpbNNCT-vWI.ttf) format('truetype');
}
html {
  font-family: 'Prata', serif;
  line-height: 1.75;
}
body {
  background: #f3e5ab;
}
.example {
  position: relative;
  display: block;
  width: 50rem;
  max-width: 90%;
  margin: 4rem auto;
}
.example > .background {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-filter: drop-shadow(0 0 1rem #ba8e59);
          filter: drop-shadow(0 0 1rem #ba8e59);
}
.example > .content {
  position: relative;
  z-index: 1;
  padding: 15% 20%;
  text-align: justify;
}
.example > .content .accent {
  float: left;
  line-height: 1.4;
  padding: 0 1rem 0 0;
  color: #619371;
  font-size: 5rem;
}
.global-svg {
  position: fixed;
  pointer-events: none;
}
@media screen and (max-width: 600px) {
  .example {
    background: #fff;
  }
  .example > .background {
    display: none;
  }
  .example > .content {
    padding: 2rem;
  }
}
</style>


</head>

<body translate="no" >
  <div class='example'>
    <div class='content'>
        <p><span class='accent'>L</span>orem ipsum dolor sit amet consectetur adipisicing elit. Tempora id magnam maiores quod repellat vitae provident. Sequi id dolorem recusandae quos quo dolorum nihil culpa libero beatae debitis explicabo suscipit fugit hic itaque temporibus, expedita rerum error obcaecati repudiandae dicta quas omnis repellendus harum quis. Quaerat eius culpa doloribus nulla aliquam ducimus, quod error quos!</p>
        <p>Consectetur minima alias maxime obcaecati est mollitia dolore tempore quas corrupti enim delectus in provident ea architecto corporis magni possimus saepe similique ab, voluptate maiores quia accusantium beatae velit! Eos facere asperiores quisquam doloribus optio minima itaque voluptatibus adipisci excepturi perferendis error, libero ipsam suscipit, neque iure quidem, laudantium porro vero deleniti quod officia dicta! Architecto id fugit laboriosam nobis nemo cupiditate dolor.</p>
    </div>
    <svg class='background' vi.........完整代码请登录后点击上方下载按钮下载查看