demand
There are a lot of web pages that have a blurring effect when they are bootstrapping. I recently encountered a requirement for this, as shown below:
implementation
Common methods
The easiest way to think about it is to cut to the diagram, which I don’t need to explain.
Most of the things you find on the web use borders, so let’s take a look at how borders do this.
<div class="mask"></div> .mask { position: absolute; top: -1647px; // Right: -1756px; filter: blur(15px); border-radius: 60px; Border: 2000 px solid rgba (0, 0,. 6); // To cover the entire page, make the border large width: 155px; height: 80px; }Copy the code
The implementation effect is as follows:
Take a closer look, hey, where are my rounded corners?
< span style = “box-sizing: border-box; color: RGB (51, 51, 51); line-height: 22px; font-size: 14px! Important; word-break: inherit! Important;” Blur (15px), and set the border-radius percentage to more than 50% for this to work, but the space will be completely rounded.
Round corners big battle
In a roundabout way, I can add a ::before to the mask, and then use it to set a small width of the border to achieve rounded corners.
/ /. Mask {overflow: hidden; }. Mask ::before {content:' ';
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border-radius: 60px;
border: 10px solid;
}
Copy the code
It was a bit of a hassle, but it gave us the rounded corners we wanted.
disadvantages
- It’s a little bit of a hassle, you have to use pseudo-elements for rounded corners.
- The positioning Settings are a little hard to calculate,
border-width
Change, and change accordinglytop
,left
And so on.
Is there a better way
After using the above method, I suddenly realized that it would be much easier to use box-shadow for this effect. Orz:
<div class="mask"></div> .mask { position: absolute; top: 350px; right: 244px; width: 155px; height: 80px; filter: blur(15px); border-radius: 60px; Box-shadow: 000 2000px rgba(0,0,0,.6); }Copy the code
It works perfectly (if you don’t consider older browsers =w=), and it’s better to use this method because
- Rounded corners easily realized;
box-shadow
It doesn’t affect the element position, the position just needs to be written according to the content position.