Question

我想在我的上边框上使用颜色渐变

我已经使用这个网站生成渐变颜色我已经完成了代码css的复制和过去，我用border-top-color替换了背景：

我的项目：

这是PSD文件： PSD FILE

HTML

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset=utf-8>
        <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
    </head>
    <body>
        <script src="js/jquery.js"></script>
        <script src="js/carousel.js"></script>
        <div id="wrap">
            <div id="carousel" >
                <div class="title">
                    Welcome to ...
                </div>
            </div>
        </div>
    </body>
</html>

CSS

#wrap {
    position: relative;
    width: 1100px;
}
#wrap:after {
    position: absolute;
    bottom: -95px;
    z-index: 9999;
    content: " ";
    height: 100px;
    width: 100%;
    background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
    background-size: cover;
}
#carousel {
    border:solid 1px #1a1a1a;
    position:relative;
    width:903px;
    height:299px;
    margin:0 auto;
    margin-top: 50px;
    background:url(http://s22.postimg.org/l2e24m48x/light.png);
}
body {
    background-color: #c7c7c7;
}
.title {
    position:absolute;
    width:883px;
    height:47px;
    bottom: 0;
    left:0;
    line-height: 47px;
    border-top:solid  1px ;
    border-top-color: rgba(240,240,240,1);


    border-top-color: -moz-linear-gradient(left, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 20%, rgba(250,250,250,1) 22%, rgba(250,250,250,1) 71%, rgba(230,230,230,1) 97%, rgba(230,230,230,1) 100%);
    border-top-color: -webkit-gradient(left top, right top, color-stop(0%, rgba(240,240,240,1)), color-stop(20%, rgba(240,240,240,1)), color-stop(22%, rgba(250,250,250,1)), color-stop(71%, rgba(250,250,250,1)), color-stop(97%, rgba(230,230,230,1)), color-stop(100%, rgba(230,230,230,1)));
    border-top-color: -webkit-linear-gradient(left, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 20%, rgba(250,250,250,1) 22%, rgba(250,250,250,1) 71%, rgba(230,230,230,1) 97%, rgba(230,230,230,1) 100%);
    border-top-color: -o-linear-gradient(left, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 20%, rgba(250,250,250,1) 22%, rgba(250,250,250,1) 71%, rgba(230,230,230,1) 97%, rgba(230,230,230,1) 100%);
    border-top-color: -ms-linear-gradient(left, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 20%, rgba(250,250,250,1) 22%, rgba(250,250,250,1) 71%, rgba(230,230,230,1) 97%, rgba(230,230,230,1) 100%);
    border-top-color: linear-gradient(to right, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 20%, rgba(250,250,250,1) 22%, rgba(250,250,250,1) 71%, rgba(230,230,230,1) 97%, rgba(230,230,230,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#e6e6e6', GradientType=1 );


    color:#ffffff;
    font-size: 12 ;
    padding-left: 19px;
    font-style: Arial;
    text-transform: uppercase;
    background:url(images/title.png) bottom left repeat;
}

所以我的问题是我没有渐变色但只有白色

Answer 1

嗯，你可以这样做

HTML：

    <div class="title">
        <div class='backTitle'></div>
        Welcome to  ...
    </div>

CSS：

.backTitle {
    width: 100%;
    height: 5px;
    position: absolute;
    background: linear-gradient(90deg, #888, #cccccc, #888);
    margin-left: -19px;
    margin-top: -5px;
}
.title {
    position:absolute;
    width:883px;
    height:47px;
    bottom: 0;
    left:0;
    line-height: 47px;
    border-top:solid  5px black;
    color:#ffffff;
    font-size: 12 ;
    padding-left: 19px;
    font-style: Arial;
    text-transform: uppercase;
    background:url(http://s22.postimg.org/s4bzqt7up/title.png) bottom left repeat  ;
}

Answer 2

<强> Demo

最好的方法是使用<hr>

CSS

top_line { 
    position:absolute;
    bottom: 47px;
    height: 1px;
    width: 100%;
    border: 0;
    margin:0;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, white));
}

HTML

<div id="wrap">
    <div id="carousel">
        <hr class="top_line" />
        <div class="title">Welcome to ...</div>
    </div>
</div>

您也可以使用Read here

执行此操作

来自给定的psd

基本上有3个要素

渐变块
渐变顶部边框
3边界渐变

从我上面的演示中得到＃2，＃3已经实现，如果你按照我附带的链接阅读，就会实现＃1。

这是你的psd部分

enter image description here

顶部边框的渐变色

2 个答案: