JS and CSS experts, please help me, how to achieve both translucency and complete transparency in a DIV_html/css_WEB-ITnose

A DIV is a square shape with an ellipse in the middle. The outside of the ellipse is white and transparent. The sides of the DIV slowly point to the center of the circle. The more transparent the background, the middle part is completely transparent and the surroundings are translucent. How to achieve this state? ?

Reply to the discussion (solution)

Let’s use pictures

I just learned css by myself these days You should be able to use css The sliding door can be solved

Use filter:alpha?? for transparency on IE, and opacity for other devices

The surroundings slowly point to the center of the circle. Are you talking about the radial gradient of CSS3?
You can use this tool to solve it http://www.colorzilla.com/gradient-editor/

The surroundings slowly point to the center of the circle. Are you talking about the radial gradient of CSS3?
You can use this tool to solve it http://www.colorzilla.com/gradient-editor/

This is all from left to right or right to left.
Can it be the center of a circle, pointing to the center of the circle, and the center part of the circle is completely transparent.

It is recommended to modify the picture directly

Same as above, it is recommended to make it into a picture. Even if it can be implemented, it is estimated that there will be a lot of code

My original idea was to use pictures to solve this problem, and now I still solve it this way. I used PS to make pictures, and the pictures take up resources. I want to take a look at them. Is there any solution using CSS?

I suggest using pictures! LZ

- - Pictures are easier to use.