12 little css facts

1. The border-radius property can use "Slash" syntax. 
2. border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
3. The font-weight property accepts relative keywords.
4. There is an outline-offset property.
5. There is an table-layout property.
6. The vertical-align property works differently on table cell vs. Other elements.
7. The ::first-letter pseudo-element is smarter than you think.
8. You can use invalid characters as delimiters in your HTML class lists.
9. Animation shorthand can break because of the animation's name.
10. You can select ranges of elements.
11. Pseudo-element can be applied ot some void elements.
12. Some attribute values are case insensitive in selectors.

More

Corner shaping mixin using stacked gradients

<nav>

  <a href="#" class="btn corner-1">Corner Scoop</a>
  <a href="#" class="btn corner-2">Corner Bevel</a>
  <a href="#" class="btn corner-3">Corner Notch</a>
</nav>




@mixin corners($shape, $size, $color) {

  $n1: $size+px;
  $n2: ($size)*2+px;
  $n3: $size+1+px;
  $pn: 0%;
  @if ($size <= 10) { $pn: 6%; }
  @elseif ($size <= 15) { $pn: 5%; }
  @elseif ($size <= 20) { $pn: 4%; }
  @elseif ($size <= 40) { $pn: 3%; }
  @elseif ($size <= 50) { $pn: 2%; }
  @elseif ($size <= 60) { $pn: 1%; }
  $pd-scoop: 64%+$pn;
  
  @if ($shape == "bevel") {
    background: $color;
    background:
          linear-gradient(to right , $color 0, $color 100%) no-repeat top center,
          linear-gradient(to bottom, $color 0, $color 100%) no-repeat center left,
          linear-gradient(135deg,  transparent 49%, $color 50% ) no-repeat top left,
          linear-gradient(-135deg, transparent 47%, $color 48% ) no-repeat top right,
          linear-gradient(45deg,   transparent 47%, $color 48% ) no-repeat bottom left,
          linear-gradient(-45deg,  transparent 46%, $color 47% ) no-repeat bottom right;
    background-size: calc(100% - #{$n2}) 100%, 100% calc(100% - #{$n2}), $n3 $n3, $n3 $n3, $n3 $n3, $n3 $n3;
  }
  
  @if ($shape == "scoop") {
    $t-t: t t; // compiler bug hack
    $t-b: t b; // compiler bug hack
    background: $color;
    background:
          linear-gradient(to right , $color 0, $color 100%) no-repeat top center,
          linear-gradient(to bottom, $color 0, $color 100%) no-repeat center left,
          radial-gradient(a+$t-t+op left,     transparent 64%, $color $pd-scoop ) no-repeat top left,
          radial-gradient(a+$t-t+op right,    transparent 64%, $color $pd-scoop ) no-repeat top right,
          radial-gradient(a+$t-b+ottom left,  transparent 64%, $color $pd-scoop ) no-repeat bottom left,
          radial-gradient(a+$t-b+ottom right, transparent 64%, $color $pd-scoop ) no-repeat bottom right;
    background-size: calc(100% - #{$n2}) 100%, 100% calc(100% - #{$n2}), $n3 $n3, $n3 $n3, $n3 $n3, $n3 $n3;
  }
  
  @if ($shape == "notch") {
    background: $color;
    background:
          linear-gradient(to right , $color 0, $color 100%) no-repeat top center,
          linear-gradient(to bottom, $color 0, $color 100%) no-repeat center left;
    background-size: calc(100% - #{$n2}) 100%, 100% calc(100% - #{$n2});
  }
  
}

.corner-1 {
  transition: all 0.3s;
  @include corners('scoop', 10, #770000);
  &:after {
    transition: all 0.3s;
    @include corners('scoop', 10, #330000);
  }
  &:hover {
    @include corners('scoop', 27, #990000);
    &:after { @include corners('scoop', 27, #330000); }
  }
}

.corner-2 {
  transition: all 0.3s;
  @include corners('bevel', 16, #007700);
  &:after {
    transition: all 0.3s;
    @include corners('bevel', 16, #003300);
  }
  &:hover {
    @include corners('bevel', 40, #009900);
    &:after { @include corners('bevel', 40, #003300); }
  }
}

.corner-3 {
  transition: all 0.3s;
  @include corners('notch', 5, #0055cc);
  &:after {
    transition: all 0.3s;
    @include corners('notch', 5, #002266);
  }
  &:hover {
    @include corners('notch', 15, #0077ee);
    &:after { @include corners('notch', 15, #002266); }
  }
}

.btn {
  display: inline-block;
  padding: 20px 30px 16px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: #fff;
  text-decoration: none;
  position: relative;
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 4px;
    left: 0;
    z-index: -1;
  }
}

nav {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -40px;
  width: 100%;
  text-align: center;
}

More...

Selector level 4

:read-only and :read-write

These selectors are pretty straightforward. Any element that’s editable by the user is in the “read-write” state. Otherwise, the element is in the “read-only” state.

jsfiddle

More