html - 我怎样才能制作一个带有文字阴影的漂亮黄色按钮？

Question

我几乎有一个漂亮的蓝色按钮，但我想要黄色背景并且我希望文本居中。

#post3 {

width: 450px;
    background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */


    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db3f2), color-stop(50%, #54a3ee), color-stop(51%, #3690f0), color-stop(100%, #1e69de)); /* Chrome,Safari4+ */


    background: -webkit-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* Chrome10+,Safari5.1+ */


    background: -o-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* Opera 11.10+ */


    background: -ms-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* IE10+ */


    background: linear-gradient(to bottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* W3C */


    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=0); /* IE6-9 */


    /*display: inline-block;*/
    border: 1px solid rgb(0, 0, 0);
    /*width: 290px;*/
    height: 45px;/*
    font-size: 150%;*/
    text-decoration: none;
    /*text-align: center;*/
    color: rgb(255, 255, 255);
    font-weight: bold;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background-image: -webkit-linear-gradient(top, rgb(109, 179, 242) 0%, rgb(84, 163, 238) 50%, rgb(54, 144, 240) 51%, rgb(30, 105, 222) 100%);
    background-position: initial initial;
    background-repeat: initial initial;
}

     
    <div id="post3"> <a href="/ai">Loren Ipsum</a></div>

你能帮帮我吗？我不知道如何使文本居中，也不知道如何应用文本阴影。

Answer 1

检查一下:

Demo

background-image: -webkit-linear-gradient(top, rgb(242, 227, 109) 0%, rgb(219, 238, 84) 50%, rgb(240, 231, 54) 51%, rgb(222, 222, 30) 100%);       
width:450px; /*It was width=450px; */