我几乎有一个漂亮的蓝色按钮，但我想要黄色背景，我想要居中的文本。
#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>你能帮帮我吗？我不知道如何将文本居中，也不知道如何应用文本阴影。
看看这个：
演示
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; */
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#post3 {
background: #ffcf32; /* Old browsers */
background: -moz-linear-gradient(top, #ffcf32 0%, #ffff30 50%, #f7df27 51%, #ffdf89 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcf32), color-stop(50%,#ffff30), color-stop(51%,#f7df27), color-stop(100%,#ffdf89)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffcf32 0%,#ffff30 50%,#f7df27 51%,#ffdf89 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffcf32 0%,#ffff30 50%,#f7df27 51%,#ffdf89 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffcf32 0%,#ffff30 50%,#f7df27 51%,#ffdf89 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffcf32 0%,#ffff30 50%,#f7df27 51%,#ffdf89 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcf32', endColorstr='#ffdf89',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;*/
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;
width: 300px;
text-align: center;
}
span.center-content {
display: inline-block;
vertical-align: middle;
line-height:45px;
}
#post3 a {
color: #fff;
font-size: 24px;
letter-spacing: 2px;
text-decoration: none;
text-shadow: 2px 3px 7px #000000;
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="post3"><span class="center-content"><a href="#">Loren Ipsum</a></span></div>
</body>
</html>
只要复制并粘贴上面的代码，你就会看到带有渐变效果的黄色按钮。查看URLhttp://www.colorzilla.com/gradient-editor/#ffcf32+0，ffff30+50，f7df27+51，ffdf89+100；自定义，用于动态创建渐变。
此代码涵盖
- 黄色渐变
- 水平和垂直居中文本
- 按钮上文本的阴影效果