diff options
| -rw-r--r-- | Base/res/html/misc/border-radius.html | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/Base/res/html/misc/border-radius.html b/Base/res/html/misc/border-radius.html index f2b316dc40..63fe0c8c2f 100644 --- a/Base/res/html/misc/border-radius.html +++ b/Base/res/html/misc/border-radius.html @@ -203,6 +203,26 @@ width: 150px; height: 100px; } + + .solid-color { + background: red content-box; + } + + .image { + background: center / contain url(car.png) content-box; + } + + .image-layers { + background: center / contain url(car.png) content-box, center / contain url(old-computer.png); + } + + .box-background-clip { + width: 100px; + height: 100px; + border: 10px solid black; + border-radius: 50px; + padding: 10px; + } </style> </head> @@ -279,6 +299,18 @@ <br> <br> + <p>These use a border-radius + a background clip (the radius of the inner background should shrink)</p> + <em>Solid color</em> + <div class="box-background-clip solid-color"></div> + <br> + <em>Background image</em> + <div class="box-background-clip image"></div> + <br> + <em>Background image layers</em> + <div class="box-background-clip image-layers"></div> + <br> + <br> + <p>The boxes are 50x50px</p> <em>All round 10px</em> <div class="box box-1"></div> |