Question

我曾经读过如何使用图像创建带阴影的跨浏览器圆形按钮，遗憾的是我遗失了书签，这就是为什么我要问有人记住这种技术。

有左侧图片，即

enter image description here

然后是非常宽的身体图像，最终会出现右边弯曲的边框/阴影：

enter image description here

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

有人知道这种技术是如何被调用的，还是可以引用我的链接？或者给我代码示例，我很欣赏其中任何一个

Answer 1

当使用图像作为按钮的开始和结束时，这些技术被称为＆＃34;滑动门＆＃34;任何搜索引擎都有无数的搜索结果...

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

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

Answer 2

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

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

<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/

如何用css创建按钮背景

4 个答案: