如何创建CSS3

Question

这样一个盒子这是我希望它是：

请检查此链接，看到了readmore图像。 我想在css3中看起来像这样

Answer 1

你可以这样做：

.button{ 
 
    width:100px; 
 
    height:30px; 
 
    -moz-border-radius:5px; 
 
    -webkit-border-radius:5px; 
 
    border-radius:5px; 
 
    background: -moz-linear-gradient(top, #89ae56 0%, #85a06d 100%); 
 
    background: -webkit-linear-gradient(top, #89ae56 0%, #85a06d 100%); 
 
    background: linear-gradient(top, #89ae56 0%, #85a06d 100%); 
 
    position:relative; 
 
    color:#fff; 
 
    line-height:30px; 
 
    padding-left:10px; 
 
} 
 
.button:after{ 
 
    content:"+"; 
 
    position:absolute; 
 
    width:20px; 
 
    height:20px; 
 
    background:#5f5f5f; 
 
    -moz-border-radius:20px; 
 
    -webkit-border-radius:20px; 
 
    border-radius:20px; 
 
    color:#fff; 
 
    text-align:center; 
 
    right:5px; 
 
    top:5px; 
 
    line-height:20px; 
 
}

<div class="button"> 
 
    Read More 
 
</div>

Answer 2

有很多方法可以实现。人们需要使用SPAN元素，具有背景渐变，圆角，带文字阴影的白色文字，像这样。

在HTML：

<span class="button-span">Read More</span> 

而在你的CSS（在http://www.colorzilla.com/gradient-editor/一个纯CSS梯度产生的后台代码）：

.button-span { 

    display: block; 
    padding: 10px 20px; 
    border-radius: 5px; 
    color: white; 
    text-shadow: 1px 1px rgba(0, 0, 0, 0.4); 

    /* Background gradient */ 
    background: #bfd255; /* Old browsers */ 
    background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 79%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color- stop(79%,#8eb92a)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 79%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #bfd255 0%,#8eb92a 79%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #bfd255 0%,#8eb92a 79%); /* IE10+ */ 
    background: linear-gradient(top, #bfd255 0%,#8eb92a 79%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfd255', endColorstr='#8eb92a',GradientType=0); /* IE6-9 */ 
} 

反复折腾的值，如果你想要的小小的+图标，你可以使用一个带有符号的透明PNG，或者使用像这样的字体中的符号：http://fortawesome.github.com/Font-Awesome/（你需要了解如何为最后一个选项嵌入字体，但它不是太困难）

希望这有助于！