Help for Css battle

[som8101]

<style>*{background:#46BA67}&{border-image:radial-gradient(7%12q,#183539 138q,#0000 469%169q,#183539)38%/0 38%101%space;*{margin:24%60 174 75 I have seen this code in top solutions in css battle of yesterday And can any one help to solve this or explain this

[novawaver]

How can I explain?

[SelenIT]

Here is this code unminified and commented:

<!-- the HTML parsing algorithm always inserts the html and body elements
     even without opening tags for them -->
<style>

/* we set the same light green background for both html and body elements */
* {
   background: #46BA67
}

/* the & selector, introduced with CSS nesting syntax,
   if not used inside any other CSS rule, means the root element (html) only */
& {
  /*  the border-image shorthand is pretty complex, its sub-properties are explained below */
  border-image:
      /*  the 1st part is border-image-source which sets the image for the 9-slice-scaling
          our image is the transparent elliptic ring with dark green inside and outside it,
          filling the entire element (400x300px) */
      radial-gradient(7%12q,#183539 138q,#0000 469%169q,#183539)
      /*  the 2nd part is border-image-slice that sets the slicing of the image.
          here, the slices for the top, right, bottom, and left sides of the graphical border
          are all equal to 38% of the respective dimension of the image,
          i.e. 114px for top/bottom slices height and 152px for side slices width */
      38%
      /*  slash separates border-image-slice from the next sub-property */
      /
      /*  the 3rd part is border-image-width that sets the final size of slices after rescaling.
          here, the top slice is shrunk to zero height, the side slices preserve their 38% width,
          and the bottom slice is stretched to the whole height of the element,
          so only the bottom row of slices remains visible. 
          Since it's larger than 100%, all values get scaled down proportionally to fit in 100%,
          resulting in side slices width reduced to 150px */
      0 38%101%
      /*  the last part here is border-image-repeat. The 'space' value makes the middle slices
          disappear if they don't fit in the space between the corner slices at least once,
          so in our case only 2 bottom corner slices remain visible.
          It's these 2 slides that makes the dark green areas with the circular arcs on them */
      space;

  /*  the nested universal selector inside the rule for the root element means
      "anything inside html", i.e. body element */
  * {
     /* top, right, bottom, and left margins of body, set to 96px, 60px, 174px, and 75px, respectively,
        set the size and the position of body such way that it becomes the middle light green bar. */
     margin: 24% 60 174 75
     /* the "px" unit for margin can be omitted if there is no doctype, so the page is rendered
        in the so called "Quirks mode" (for compatibility with old browsers).
        Please do so only in CSSBattle and never in production! :) */