# introduction

  • Gaussian blurCan make the page more beautiful, using layer relationship andFilter attribute
  • The filter attribute is a new style attribute in CSS3 (IE does not support this attribute).

The practical application of Gaussian blur

  • Implement a simple demonstration example
    <div class="maskingimg" id="maskingimg"></div>
    <div class="maskingcolor"></div>
Copy the code
  • The larger the value in blur, the higher the degree of blur
  • With some simple styles, such as maskingColor to add transparent color coverage, it will be very beautiful
.maskingcolor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(245.240.245.0.35);
}

.maskingimg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%; background: url(.. /image/photo/msg-bg.png); background-size: cover; -webkit-filter: blur(1px);/* Chrome, Safari, Opera */
    filter: blur(1px);
}
Copy the code

The renderings are shown below

aboutFilter attributeobject

  • Here with theblur
    • Set the image to Gaussian blur. When setting PX, it is the number of pixels on the screen that are fused together, so the larger the value, the blurring will be.
    • Filters can be expressed as percentages or as decimals.
attribute instructions type
sepia brown A decimal with values between 0 and 1
saturate saturation A value of num
hue-rotate Hue rotation Value is Angle (default is 0deg)
invert The color A decimal with values between 0 and 1
opacity transparency A decimal with values between 0 and 1
brightness brightness A decimal with values between 0 and 1
contrast contrast A value of num
blur The fuzzy A value of length
drop-shadow shadow

compatibility

  • About the browser versions supported by Filter
    • 18.0 Chrome
    • 35.0 FireFox
    • 6.0 Safari
    • 15.0 Opera
    • Internet Explorer and Edge are not supported

The use of pseudo-elements and pseudo-classes

Just draw a heart using CSS, the track of the implementation process is as follows

Implementation steps

  • First, fix the width, height and background color of each container and proceedrelativepositioning
.heart {
     width: 30px;
     height: 30px;
     background: red;
     position: relative;
 }
 <div class="heart"></div>
Copy the code
  • Then we use pseudo-class elements:afterand:before, the use ofinheritInherits the property value of the parent class
  • Note: Shift half of the main element of the square so that all pseudo-classes are ’embedded’ with the main element
 .heart:after,
 .heart:before {
           content: ' ';
           width: inherit;
           height: inherit;
           background: inherit;
           position: absolute;
       }
.heart:after { top: -15px; }
.heart:before { left: -15px; }
Copy the code
  • What it looks like right now

  • Then there are the border rounded corners, which are used on pseudo-class elementsborder-radius: 50%Create two semicircles

  • At this point, the image is there, but the direction is a little skewed (the two pseudo-class elements are first used different colors, easy to observe the change).
  • The use oftransformAfter rotation, change to the same color system and you are done!

Complete sample code, quick to paste in the past to see the effect yourself

<style>
 .heart {
   width: 30px;
   height: 30px;
   top: 50px;
   left: 50px;
   background: red;
   position: relative;
   transform: rotate(45deg);
   /* Compatible browser */
   /* -webkit-transform: rotate(45deg); * /
   /* -moz-transform: rotate(45deg); * /
   }
   .heart:after,
   .heart:before {
       content: ' ';
       width: inherit;
       height: inherit;
       background: inherit;
       border-radius: 50%;
       /* -webkit-border-radius: 50%; * /
       /* -moz-border-radius: 50%; * /
       position: absolute;
   }
   .heart:after { top: -15px; }
   .heart:before { left: -15px; } </style> <body>
   <div class="heart"> </div>
 </body>
Copy the code

You may also be interested in the following

  • JavaScript reads local file configuration (compatible with lower IE versions)
  • How are some of the apis implemented in # VUE3.0?
  • What are the front-end questions of one year’s work experience?
  • # JavaScript Language Essentials series
  • # Diagram HTTP series