CSS内边框？ [英] CSS Inner Border?

问题描述

我在左侧纯粹使用CSS创建了按钮。它是一个div内的div。但是，右侧的三个按钮是 img 标签上的背景属性。我这样做，所以我可以按照。

解决方案

根据框模型，填充位于 content 和 border 。您应该能够为图片设置样式：

  .img-btn {
 background：#FFF; // inner border color 
 padding：2px; // inner border width 
 border：2px solid＃[yourgreen]; // outer border 
} 
  

您不需要任何额外的 div s来实现这一点，即使是纯CSS按钮。以下样式是针对图像是背景图像的情况：

  .img-btn {
 background： #FFF url（'your.img'）no-repeat; 
 padding：2px; 
 border：2px solid＃[yourgreen]; 
 width：[image width]; 
 height：[image height]; 
 background-position：center center; 
} 
  

这是一个 DEMO 。

I created the button on the left purely with CSS. It is a div within a div. However, the three buttons on the right are background properties on img tags. I did this so I could simulate a rollover effect following instructions from here.

Now, is there a way to add the inner border, as in the first button, to the other three using CSS?

Fiddle here.

解决方案

According to the box model, padding is between the content and border. You should be able to style the images like:

 .img-btn {
     background: #FFF; // inner border color
     padding: 2px; // inner border width
     border: 2px solid #[yourgreen]; // outer border
 }

You shouldn't need any extra divs to accomplish this, even for your pure CSS button. Following style is for the case when the image is a background-image:

.img-btn {
    background: #FFF url('your.img') no-repeat;
    padding: 2px;
    border: 2px solid #[yourgreen];
    width: [image width];
    height: [image height];
    background-position: center center;
}

Here's a DEMO of double-border as described above.

这篇关于CSS内边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！