グラデーションのあるボーダー作成

・ボーダーにはグラデーションがかけられないので、:before , :after を使う

→heightを決めて、バックグラウンドにグラデーションをかけて疑似的にボーダーのグラデーションに見せる

.example:before{
    content:"";
    display:block;
    height:1px;
    width:100%;
    background: -webkit-gradient(linear, left top, right bottom, from(#f00), to(#00f));
    background: -moz-linear-gradient(left, #f00, #00f);
    background: linear-gradient(left, #f00, #00f);
}

【CSS3】border要素にグラデーションを施す方法