CSS中的自定义图像边框答案

【问题标题】：Custom image border in CSSCSS中的自定义图像边框
【发布时间】：2012-11-12 13:28:55
【问题描述】：

所以我想制作一个如下所示的文本字段：

可以像这样随着文本变短或变长而调整大小

前; 和

这是我得到的部分，，

那么有什么简单的方法可以用 css 来实现吗？

【问题讨论】：

为什么不简单地使用 CSS border 和 background-color（可能还有 box-shadow 和 border-radius）并省去 background-image-jigsaw 的烦恼？
如果我使用 box-shadow 它不会在 Internet Explorer 中工作，对吧？
stackoverflow.com/questions/8181699/box-shadow-in-ie7-and-ie8
我认为盒子阴影不适用于 input 元素 @DavidThomas，我弄错了吗？
@WesleyMurch: Works for me（尽管仅在 Chromium 22/Ubuntu 12.10 中测试过）。

标签： css

【解决方案1】：

示例

<style>


.class_name{border: 1px solid white;-moz-border-radius:19px;
-webkit-border-radius: 19px;
border-radius:5px;
-moz-box-shadow: 0px 0px 5px #666;
-webkit-box-shadow: 0px 0px 5px #666;
box-shadow: 0px 0px 5px #666;
padding:2px 10px;
text-align:center;
width:70px; height:auto;
margin:0px auto;}
</style>

html代码

<div class="class_name">sample</div>

【讨论】：

我认为 OP 试图进行输入，用户可以输入。