我读过一次如何使用图像创建带有阴影的跨浏览器圆形按钮，不幸的是我丢失了书签，这就是为什么我问是否有人记得这项技术。
有左侧图片即
然后非常宽的身体图像以右弯曲边框/阴影结束，如下所示：
所以最后你会得到一个可以用于多种尺寸的按钮吗？我在谷歌上搜索这个，但似乎每个人都使用没有图像的 css。
有谁知道这种技术是如何被调用的，或者可以将我推荐给链接吗？或给我代码示例，我将不胜感激
4 回答
1
当使用图像作为按钮的开始和一个图像作为结束时，这些技术被称为“滑动门”，任何搜索引擎都有无数的搜索结果......</p>
有关介绍，请阅读 A List Apart 文章：http ://www.alistapart.com/articles/slidingdoors
但是正如 Neurofluxation 在上面的评论中问你的那样：为什么在我们有多种其他方法在 CSS 中设置按钮样式之后，你会那么做呢？例如，A List Apart 文章是从 2003 年开始的——用互联网术语来说，这是一个时代。
于 2012-10-15T15:19:34.803 回答
0
这种技术是“滑动门”技术的一种变体：
- 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/
您的结果可能会因您的精灵和内容的自然宽度而异。
于 2012-10-15T15:21:41.133 回答
0
这是我认为您正在寻找的技术（使用您附加的相同图像）：
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/
于 2012-10-15T17:02:11.687 回答
0
使用 CSS 属性而不是图像可以使您的应用程序更快。
在这种情况下，您可以只使用：Border-Radius、Box-Shadow 与渐变背景相结合。
在这里你可以找到一个好的渐变编辑器：
http://www.colorzilla.com/gradient-editor/
如何使用 Border-radius 和 Box-shadow：
于 2012-10-15T17:14:37.900 回答