html - 如何使用 css 创建按钮背景

Question

我读过一次如何使用图像创建带有阴影的跨浏览器圆形按钮，不幸的是我丢失了书签，这就是为什么我问是否有人记得这项技术。

有左侧图片即

然后非常宽的身体图像以右弯曲边框/阴影结束，如下所示：

所以最后你会得到一个可以用于多种尺寸的按钮吗？我在谷歌上搜索这个，但似乎每个人都使用没有图像的 css。

有谁知道这种技术是如何被调用的，或者可以将我推荐给链接吗？或给我代码示例，我将不胜感激

Answer 1

当使用图像作为按钮的开始和一个图像作为结束时，这些技术被称为“滑动门”，任何搜索引擎都有无数的搜索结果......</p>

有关介绍，请阅读 A List Apart 文章：http ://www.alistapart.com/articles/slidingdoors

但是正如 Neurofluxation 在上面的评论中问你的那样：为什么在我们有多种其他方法在 CSS 中设置按钮样式之后，你会那么做呢？例如，A List Apart 文章是从 2003 年开始的——用互联网术语来说，这是一个时代。

Answer 2

这种技术是“滑动门”技术的一种变体：

• http://www.alistapart.com/articles/slidingdoors/
• http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
• http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/

基本上你使用这样的标记：

<button><span>Text</span></button>

然后将带有边缘图像的样式设置span为侧面，与父元素的主要背景图像重叠。像这样的东西：

button {
    background:url(main-image.png) top right no-repeat;
    border:0;
    padding:0;
    width:80px;  /* with only 1 "door", you might need to set a width */
    /* other resets may be necessary */
}
span {
    background:url(left-door.png) left top no-repeat;
}
button, span {
    height:37px; /* height of your sprite */
    display:block;
}​

演示：http: //jsfiddle.net/Kqs3m/

您的结果可能会因您的精灵和内容的自然宽度而异。

Answer 3

这是我认为您正在寻找的技术（使用您附加的相同图像）：

HTML：

​<a href="#" class="button">
  <span>Small</span>
</a>
<a href="#" class="button">
  <span>Large button</span>
</a>​​​​​​​​​​​​

CSS：

​.button {
    background: url('http://i.stack.imgur.com/htUHL.png') no-repeat left top;
    padding-left: 9px;
    height: 37px;
    display: inline-block;
    text-decoration: none;
    color: #555;
    text-shadow: 0 1px 1px #FFF;
    font-family: sans-serif;
    font-size: 0.8em;
}
.button span {
    background: url('http://i.stack.imgur.com/ID6nO.png') no-repeat right top;
    display: inline-block;
    height: 37px;
    padding: 5px 12px 5px 3px;
}
.button:hover span {
    ​color: #333;
}​

演示链接：http: //jsfiddle.net/v284q/

Answer 4

使用 CSS 属性而不是图像可以使您的应用程序更快。

在这种情况下，您可以只使用：Border-Radius、Box-Shadow 与渐变背景相结合。

在这里你可以找到一个好的渐变编辑器：

http://www.colorzilla.com/gradient-editor/

如何使用 Border-radius 和 Box-shadow：

http://www.css3.info/preview/rounded-border/

http://www.css3.info/preview/box-shadow/