おとなになんかならないで

■ CSS3（firefox / webkit）による太ボーダー 00:27

  background-image:
   -moz-linear-gradient(
    top right,  
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.3) 10%,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.3) 40%,
    rgba(255, 255, 255, 0.3) 60%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0) 90%,
    rgba(255, 255, 255, 0.3) 90%,
    rgba(255, 255, 255, 0.3) 100%
   );
  -moz-background-size: 30px 30px;
  background-image:
    -webkit-gradient(
    linear, right top, left bottom,
    color-stop(0.0, rgba(255, 255, 255, 0.3)),
    color-stop(0.10, rgba(255, 255, 255, 0.3)),
    color-stop(0.10, rgba(255, 255, 255, 0)),
    color-stop(0.40, rgba(255, 255, 255, 0)),
    color-stop(0.40, rgba(255, 255, 255, 0.3)),
    color-stop(0.60, rgba(255, 255, 255, 0.3)),
    color-stop(0.60, rgba(255, 255, 255, 0)),
    color-stop(0.90, rgba(255, 255, 255, 0)),
    color-stop(0.90, rgba(255, 255, 255, 0.3)),
    color-stop(1.00, rgba(255, 255, 255, 0.3))
   );
  -webkit-background-size: 30px 30px;

これでたぶんだいたい１：１の太さになるはずだけど、ちょっと違う感じがする。background-sizeの値で太さが変えられます。