给图片加上边框.(仿胶卷)

最新推荐文章于 2024-07-29 09:17:12 发布

最新推荐文章于 2024-07-29 09:17:12 发布 · 212 阅读

文章标签：

#IE #Opera #CSS #HTML #UP

html和css 专栏收录该内容

63 篇文章

订阅专栏

本文深入探讨了CSS样式的实现方法，包括边框和轮廓的不同应用技巧。通过具体实例讲解如何在不同浏览器环境下实现一致的显示效果，特别是针对Internet Explorer的特殊处理方式。

http://www.corange.cn//uploadfiles/2a18c100d779b219738b65c1_17907.jpg

http://www.corange.cn//uploadfiles/e417c539b2da45fb3b87cec3_40970.jpg

body{
margin:1em 12em;
background:#fff;
font:normal 1em/1.6em "lucida grande", "trebuchet ms", verdana, sans-serif;
}
h1{
text-indent:2em;
color:#dfdfdf;
background:#555;
padding:5px 0; margin:.4em 0;
border-top:4px solid #000;
font:normal 2em/1.1em "lucida grande", "trebuchet ms", verdana, sans-serif;
}
h2{
font-size:1.3em;
margin:1em 0;
}
a:link, a:visited, a:hover{ color:salmon; }
img{
float:left;
margin:0 30px 0 0; padding:4px;
}
.border-wrap, .outline-wrap{
width:96%;
padding:0 2% 20px 2%;
overflow:hidden;
}
.border{
border:5px dotted #fff; margin-right:23px;
/* border:3px dotted #fff;*/ /* this works better for Opera */
background:#ccc;
}
.outline-wrap{
background:#555;
color:#dfdfdf;
}
.outline{
outline:5px dotted #fff; /* dotted works better for Opera then dashed */
background:#fff;
}
.xray{
border-color:red;
outline-color:red;
background:yellow;
margin:20px auto;
float:none;
display:block;
}
#footer{
background:#555;
border-top:4px solid #000;
color:#efefef;
padding:.5em 1em 3em 1em;
text-align:center;
font-size:.8em; line-height:1.3em;
}
pre{
overflow:auto;
border:2px solid #ccc;
padding:4px;
float:right;
}
/* OK listen up, dont use the star html hack, I am using it here because I am too lazy to write a separate stylesheet for IE and use conditional comments */
* html .border{ border:5px dashed #ccc; } /* tweak for IE */
* html .xray{ border-color:red; }
* html .outline-wrap .border{ border-color:#fff; background:#fff; }
CSS Stamps v1.1
The border method
The outline method
Border method only for IE on a dark background