備忘録Tips

3区切りのボーダー

【表示例】 【CSS】

  /* 3区切りのボーダー */
.greenLine {
    background: #008000; /* Old browsers */
    background: -moz-linear-gradient(-90deg,  #FF0000 0%, #FF0000 33.3%,  #0000FF 33.3%, #0000FF 66.6%, #008000 66.6%,  #008000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#FF0000), color-stop(33.3%,#FF0000), color-stop(33.3%,#0000FF), color-stop(66.6%,#0000FF), color-stop(66.1%,#008000), color-stop(100%,#008000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(0deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-90deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-90deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* IE10+ */
    background: linear-gradient(90deg,  #FF0000 0%,#FF0000 33.3%,#0000FF 33.3%,#0000FF 66.6%,#008000 66.6%,#008000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#008000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding-bottom:3px;
    margin-bottom: 2%; 
}

グラデーションのボーダー

【表示例】 【CSS】

  /* グラデーションのボーダー */
 .blueLine {
    background: #dedede; /* Old browsers */
    background: -moz-linear-gradient(-90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3296c8), color-stop(10%,#0075be), color-stop(50%,#1e9cd7), color-stop(70%,#cce0f4), color-stop(90%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(0deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* IE10+ */
    background: linear-gradient(90deg,  #3296c8 0%, #0075be 10%, #1e9cd7 50%, #cce0f4 70%, #ffffff 90%, #ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dad45', endColorstr='#dedede',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding-bottom:5px;
    margin-bottom: 2%; 
}