CSS3による背景の装飾 - 消えるボーダー

by ethertank

HTML

<div>
<p>いろはにほへと　ちりぬるを わかよたれそ　　つねならむ うゐのおくやま　けふこえて あさきゆめみし　ゑひもせすん  色は匂へど　散りぬるを 我が世誰そ　常ならむ 有為の奥山　今日越えて 浅き夢見じ　酔ひもせず     いろはにほへと　ちりぬるを わかよたれそ　　つねならむ うゐのおくやま　けふこえて あさきゆめみし　ゑひもせすん  色は匂へど　散りぬるを 我が世誰そ　常ならむ 有為の奥山　今日越えて 浅き夢見じ　酔ひもせず</p>
</div>

CSS

div {
    width: 400px; margin: 40px auto;
    position: relative; padding: 20px;

    background-position: 1px 1px, 0 0;
    background-repeat: no-repeat;
    background-size: 438px 100%, 100% 100%;

    background-image:
        -webkit-gradient(
            linear, left top, left bottom,
            from(#fff),to(#fff)
        ),
        -webkit-gradient(
            linear, left top, left bottom,
            from(#000),to(#fff)
        );

    background-image:
        -webkit-linear-gradient(top, #fff, #fff),
        -webkit-linear-gradient(top, #000, #fff);

    background-image:
        -moz-linear-gradient(top, #fff, #fff),
        -moz-linear-gradient(top, #000, #fff);

    background-image:
        -o-linear-gradient(top, #fff, #fff),
        -o-linear-gradient(top, #000, #fff);

    background-image:
        linear-gradient(top, #fff,#fff),
        linear-gradient(top, #000, #fff);
}