How can I avoid using 'at' in radial-gradient?
CalistoQueets
I want to get the result below but without using the at syntax because it's not supported in Safari, I'm having a hard time with it. Does any one know any approach? Thank you in advance!
#content {
background-color: black;
height: 300px;
width: 500px;
}
#inverted-circle {
background: radial-gradient(110% 200% at 50% 0, white 49.9%, rgba(255,255,255,0) 50.05%);
position: relative;
content: '';
height: 220px;
width: 100%;
}<div id="content">
<div id="inverted-circle"></div>
</div>It's still not working on Safari on iOS
Temani Afif
Consider background-size/background-position. You make the background twice bigger in height, you divide the vertical radius by 2 and you place your background at the bottom.
#content {
background-color: black;
height: 300px;
width: 500px;
}
#inverted-circle {
background:
radial-gradient(110% 100%, white 49.9%, transparent 50.05%)
bottom/
100% 200%;
height: 220px;
width: 100%;
}<div id="content">
<div id="inverted-circle"></div>
</div>Related to get more details: How to animate a radial-gradient using CSS?
You can also optimize your code with only one element:
#content {
height: 300px;
width: 500px;
background:
radial-gradient(55% 36.5%, white 99.5%, black 100%)
bottom /
100% 200%;
}<div id="content">
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
How can I avoid repeating the css and not using !important?
- 2
Can I avoid using a kubernetes volume
- 3
background paterns in css/scss using linear-gradient/radial-gradient
- 4
How can I avoid "environment hell" in postman?
- 5
How can I avoid losing precision with ftFmtBcd?
- 6
How can I avoid a circular reference situation
- 7
Django conditional queries: How can I avoid this?
- 8
How can I avoid duplicate templates in Meteor?
- 9
How i can avoid the distinct() of watchdog?
- 10
How can I avoid problems with CPU power?
- 11
How can I combine two gradient tapes in TensorFlow 2.0
- 12
How can I Convert grayscale image to false color gradient with imagemagick
- 13
Why does C# compiler create private DisplayClass when using LINQ method Any() and how can I avoid it?
- 14
How can I avoid nested Navigation Bars in SwiftUI?
- 15
How can I avoid running some tests in parallel?
- 16
How can I avoid Phusion Passenger running as root?
- 17
How can i avoid Jquery translate `?` to `%3F`
- 18
How can I avoid overwriting dynamodb from two lambdas?
- 19
EXC_BAD_ACCESS - How can I avoid it?
- 20
How can i avoid or pass over a directory that is access denied?
- 21
How can I avoid a black background when fading in an overlay with ffmpeg?
- 22
Highcharts spider chart with radial gradient fill not centered
- 23
How do I avoid using a million view controllers for tableview list?
- 24
How would I avoid using a goto statement here?
- 25
How do I avoid duplication of code using AASM?
- 26
Can I avoid mutating in this scenario?
- 27
How do I create weighted scatter plot / bubble chart with color gradient using plotly R
- 28
How can I avoid my program to keep running when I close my main frame?
- 29
How can I avoid Firefox's "you have chosen to open" dialog when I try to download a file?
コメントを追加