<div class="container">
  <div class="title"><span>Lorem Ipsum</span></div>
  <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>
$border-lt = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAAICAYAAACmoJLhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVBJREFUeNrE1b8rRXEYx/FzdBdFBibKpHSllJKBSZKIG5PFj8UgybVSysRkNomBRO5iQcmPDEIG/gKTkkL5GeL96KN0un70PcP3qVf3dPrenu95vs95Tth18R78IxbRgMfALd6QQBFWUIoKPAX+wnIXoiDxx8JcbOIV9bhxSPaCJDawhEacohYPngpghzmMCfT8VoRibOMYI7h0TFiHZcygHwsYx7XHLphEN5qwn/PDomqcIIPBGAWwRKt68CFMYdRzAWwv7WjFnnVqtk5IYR5j+r1zTGan3aciDKgLMjHmStywV3td11aAc3wOxGgR0nr4Xv3h2THhLKpwiE50YFfzwUeUYEvdnY529vciTKNNmz5w3HCeTttesytUogVnGq4+ogZrmNMsuI0usCLka3A1696OPmmhQ8JQHVSGct07+mo7TxHqS2BFuM+24EOAAQDX+0qANxb6nAAAAABJRU5ErkJggg=="
$border-rb = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAAAICAYAAABOICfKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMlJREFUeNpijHj+fyoDA0M0EDMyYAKQWAUQrwPi/0AcD8QNQMwExH+BWBkqDgJVUHls5gw0+I9FbDoLkOAC4slAPA9NEYg9G4i/A/FLKP8nEDMDMRtUzSsg/gdlg+iFQDwBh2WDCRQAMScLlPMOiB9gcfRXIkMRBj7gMGewAZA7BZgYRjAY9fxIBbA8HwDE8ljk9YB4Ew492IA7EPMPAX9bAPEJkEc2ALEhDkWLgfgCUgF2AohbkKpB5IJtBxB/HCKRDnLrCYAAAwDv3iwi7CJOlgAAAABJRU5ErkJggg=="
$border-line = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpiiHj+/wRAgAEABuADB4DAXYsAAAAASUVORK5CYII="
.container
  width 450px
  color #7ce0f7
  padding 25px
  margin auto
  position relative
  box-sizing border-box
  background url($border-lt) top left 140px no-repeat, /*左上角图形 */
             url($border-rb) bottom right no-repeat, /* 右下角图形 */
             url($border-line) top left 200px/100% 1px no-repeat, /* 上边框 */
             url($border-line) right bottom 15px/1px 100% no-repeat, /* 右边框 */
             url($border-line) bottom right 85px/100% 1px no-repeat, /* 下边框 */
             url($border-line) left top 25px/1px 100% no-repeat /* 左边框 */
  box-shadow inset 0 0 45px 25px rgba(@color,.2)
  .title
    font-size 18px
    position absolute
    left 0
    top 0
    transform translateY(-35%)
  .content
    line-height 1.5
    font-size 15px
             
  
body
  width 100vw
  height 100vh
  background #020819 url(https://z3.ax1x.com/2021/07/31/WvP6SK.jpg) center/cover no-repeat
  display flex
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.