Simply speaking, you need to achieve it through the border-radius of the circular p element and the overflow of the package. As for the deeper orange, it should be the shadow
I'm really sorry, I have always used firefox, but I didn't expect it to be different between radial-gradientand chrome. It’s also because I don’t understand it well enough.
I have modified the link below again.
================
Using CSS3 variables to control the radius size, I can’t think of a simpler way for now I’m going further and further down the road of not being downwardly incompatible...
DEMO-New
====================================
Please see the DEMO for details. It is a pure CSS3 implementation without adding additional tags. Although I feel that the scalability is not high, it should still be able to be put into production with continued improvement.
There is a lot more magic in CSS3. If you think about it more deeply, you will come up with many interesting functions. Just like the author of "CSS Revealed".
There is a task called chamfering in css3
Simply speaking, you need to achieve it through the border-radius of the circular p element and the overflow of the package. As for the deeper orange, it should be the shadow
I'm really sorry, I have always used firefox, but I didn't expect it to be different between
radial-gradient
and chrome. It’s also because I don’t understand it well enough.I have modified the link below again.
================
Using CSS3 variables to control the radius size, I can’t think of a simpler way for now
I’m going further and further down the road of not being downwardly incompatible...
DEMO-New
====================================
Please see the DEMO for details. It is a pure CSS3 implementation without adding additional tags. Although I feel that the scalability is not high, it should still be able to be put into production with continued improvement.
There is a lot more magic in CSS3. If you think about it more deeply, you will come up with many interesting functions. Just like the author of "CSS Revealed".
DEMO