Question

我想知道是否有可能在html和css中创建一个div作为图片，如果可能的话，怎么可能呢？

我可以设定每一方的大小吗？所以我们可以在底部做得更大

Answer 1

在这个时代，你无法在元素上获得那种类型的边框（像素化）。

因此，做这种事情的理想方式是使用div的背景图像。

div {
  background-image: url('../link/to/image.png');
}

为什么呢？因为这种类型的8位边框和输出现在已经过时了。没有操作系统或Web浏览器会允许您默认执行此操作，并且使用CSS，如果您甚至可以设法这样做，那将非常困难。因此，可以选择使用background-image设置此类边框和所有其他内容。

Answer 2

是的，这很简单。

您可以在css background属性中使用图像。使用此代码作为示例：

background: url(http://i.imgur.com/pGzLkoF.png);

您需要调整div的大小以适应图片。您还可以将图片保存到文件目录中，然后将路径放在url()内的文件中，而不是您发布的网址。

Answer 3

正如其他人所说;像素化的角落必须来自背景图像。

但颜色和圆角当然可以是纯网页代码。

注意：不完全正确。但是应该很容易让你到那儿。

#cooldiv { 
   border:2px solid #a1a1a1; 
   padding:10px 40px; 
   background-image: url('transparent.png');
   width:300px;
   border-radius:25px;
}

Answer 4

嗯......这对于纯粹的CSS来说是可能的，但我不会建议，因为它不太实用。

如上所述，最好的选择是使用background-image。如果你需要一些东西来对每个尺寸做出响应并希望有一些灵活性，那么我会建议一个SVG图像（可缩放矢量图形），因为它可以调整到任何屏幕尺寸。 SVG也有IE8＆lt; =这应该是需要考虑的事情。

以下是我如何实现这一目标，

HTML：

<div class="frame">
    <div class="frame-1">
        <div class="top-1"></div>
        <div class="middle-1"></div>
        <div class="bottom-1"></div>
    </div>
    <div class="frame-2">
        <div class="top-2"></div>
        <div class="middle-2"></div>
        <div class="bottom-2"></div>
    </div>
    <div class="frame-3">
        <div class="top-3"></div>
        <div class="middle-3"></div>
        <div class="bottom-3"></div>
    </div>
    <p>Here is some text or whatever that will go in this abomination.</p>
</div>

的CSS：

.frame {
    width: 600px;
    margin: 0 auto;
    position: relative;
}

.frame p {
    position: absolute;
    display: block;
    width: 80%;
    height: 80%;
    left: 10%;
    margin-top: 10%;
    text-align: center;
}

.frame-1 {
    width: 600px;
    position: absolute;
}

.top-1, .middle-1, .bottom-1 {
    background: black;
    position: absolute;
}

.top-1 {
    width: 90%;
    height: 300px;
    left: 5%;
}

.middle-1 {
    width: 96%;
    height: 280px;
    top: 10px;
    left: 2%;
}

.bottom-1 {
    width: 100%;
    height: 260px;
    top: 20px;
}

.frame-2 {
    width: 570px;
    position: absolute;
    top: 15px;
    left: 15px;
}

.top-2, .middle-2, .bottom-2 {
    background: rgb(46, 170, 228);
    position: absolute;
}

.top-2 {
    width: 90%;
    height: 270px;
    left: 5%;
}

.middle-2 {
    width: 96%;
    height: 250px;
    top: 10px;
    left: 2%;
}

.bottom-2 {
    width: 100%;
    height: 230px;
    top: 20px;
}

.frame-3 {
    width: 540px;
    position: absolute;
    top: 30px;
    left: 30px;
}

.top-3, .middle-3, .bottom-3 {
    background: rgb(147, 200, 235);
    position: absolute;
}

.top-3 {
    width: 90%;
    height: 240px;
    left: 5%;
}

.middle-3 {
    width: 96%;
    height: 220px;
    top: 10px;
    left: 2%;
}

.bottom-3 {
    width: 100%;
    height: 200px;
    top: 20px;
}

最后，小提琴：Demo

不完美地影响阴影：Demo

将div创建为图像

4 个答案: