What this is supposed to do is create a font that displays in HTML as a key on a keyboard (I am creating a chart showing a game's keyboard shortcuts). See screenshot.
I was given the following HTML code:
Code: Select all
<kbd style="border: 1px solid #aaaaaa; border-radius: 2px; box-shadow: 1px 2px 2px #dddddd; background-color: #f9f9f9; background-image: linear-gradient(top, #eeeeee, #f9f9f9, #eeeeee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">B</kbd>
Code: Select all
*.TEXT-KEY
{
BORDER: 1px solid #aaaaaa;
BORDER-RADIUS: 2px;
BOX-SHADOW: 1px 2px 2px #dddddd;
BACKGROUND-COLOR: #f9f9f9;
BACKGROUND-IMAGE: linear-gradient(top, #eeeeee, #f9f9f9, #eeeeee);
PADDING: 1px 3px;
FONT-FAMILY: inherit;
FONT-SIZE: 0.85em;
}
The linear-gradient() syntax is invalid. The syntax for linear-gradient() is linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> ), where <side-or-corner> is "[ left | right ] || [ top | bottom ]", <color-stop-list> is "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#", <linear-color-stop> is "<color> && <color-stop-length>?", <linear-color-hint> is <length-percentage>, and <color-stop-length> is <length-percentage>{1,2}. Note the required "to" keyword before <side-or-corner>.
---
(Styles) Expected a valid <color-stop-list> starting here. Check that all colors, lengths, and percentages in the <color-stop-list> are valid. <color-stop-list> is "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#", <linear-color-stop> is "<color> && <length-percentage>?", and <linear-color-hint> is <length-percentage>.