• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

CSS内部边框?

JavaScript 来源:john 5次浏览

我纯粹用CSS创建了左边的按钮。它是一个div内的div。但是,右边的三个按钮是background属性上的img标签。我这样做是为了能够根据here的说明模拟翻转效果。CSS内部边框?

enter image description here

现在,有没有办法使用CSS添加的内部边界,如在第一个按钮,其他三个?

小提琴here。


===========解决方案如下:

按照box model,填充是内容之间边界。您应该能够样式化相似图片:

.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如上所述。


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)