radial-gradient-container-relative-units-004.html (627B)
1 <!doctype html> 2 <title>radial-gradient() with container relative unit <radial-size> (vertical)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-images/#radial-gradient-syntax"> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 5 <link rel="match" href="radial-gradient-container-relative-units-ref.html"> 6 <style> 7 #container { container-type: size; width: 100px; height: 100px; } 8 #inner { 9 width: 100%; 10 height: 100%; 11 background-image: radial-gradient(50px 50cqb ellipse at 50px 50px, green, blue); 12 } 13 </style> 14 <div id="container"> 15 <div id="inner"></div> 16 </div>