<div class="container">
    <div class="title">Lorem Ipsum</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>
.container
  width 450px
  color white
  background rgba(10,106,255,.1)
  padding 25px
  border-width 2px
  border-style dotted // 线框类型
  border-color #305184
  border-radius 5px // 圆角样式
  margin auto
  position relative
  box-sizing border-box
  .border-style
    content ''
    width 15px
    height @width
    border 0 solid 
    border-color #82d3e8
    filter drop-shadow(0px 0px 3px lighten(@border-color,20)) // 四角发光
    display block
    position absolute
    pointer-events none
  &:before
    @extend .border-style
    border-top-width @border-width
    border-left-width @border-width
    border-top-left-radius @border-radius
    top -@border-width
    left -@border-width
  &:after
    @extend .border-style
    border-top-width @border-width
    border-right-width @border-width
    border-top-right-radius @border-radius
    top -@border-width
    right -@border-width
  .title
    font-size 20px
    margin-bottom 15px
  .content
    font-size 16px
    line-height 1.4
    &:before
      @extend .border-style
      border-bottom-width @border-width
      border-left-width @border-width
      border-bottom-left-radius @border-radius
      bottom -@border-width
      left -@border-width
    &:after
      @extend .border-style
      border-bottom-width @border-width
      border-right-width @border-width
      border-bottom-right-radius @border-radius
      bottom -@border-width
      right -@border-width
  
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.