如何在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/（你会需要找出如何为最后一个选项嵌入字体，但这并不太难）

希望这有帮助！