css的应用十分广泛,即便用在图片的效果中也是方法多样，下面就介绍五种为图片添加特殊效果边框的CSS写法
阴影效果
通过使用带有一些padding之的背景图来添加阴影效果。
HTML<img class=”shadow” src=”sample.jpg” alt=”" />CSS
img.shadow {
background: url(shadow-1000×1000.gif) no-repeat right bottom
padding: 5px 10px 10px 5px
}
双边框效果
这应该是目前最常见的技巧，我们通过以下方式创建说边框
HTML<img class="double-border" src="sample.jpg" alt="" />CSS
img.double-border {
border: 5px solid #ddd
padding: 5px
background: #fff
}
图片外框效果
webdesignerwall.com上有最好的讲解，这个效果是基于在上面层叠一个有透明度的图片的技术。至于IE6的PNG透明度问题，可以参考这篇教程。
HTML<div class="frame-block">
<span> </span>
<img src="sample.jpg" alt="" />
</div>CSS
.frame-block {
position: relative
display: block
height:335px
width: 575px
}
.frame-block span {
background: url(frame.png) no-repeat center top
height:335px
width: 575px
display: block
position: absolute
}
水印效果
你可以通过降低主图片的透明度来让背景图片透过来显示的方法添加水印
HTML<div class="transp-block">
<img class="transparent" src="sample.jpg" alt="" />
</div>CSS
.transp-block {
background: #000 url(watermark.jpg) no-repeat
width: 575px
height: 335px
}
img.transparent {
filter:alpha(opacity=75)
opacity:.75
}
为图片添加说明文字
使用绝对定位和透明度的设置来添加灵活的说明。
HTML<div class="img-desc">
<img src="sample.jpg" alt="" />
<cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>CSS
.img-desc {
position: relative
display: block
height:335px
width: 575px
}
.img-desc cite {
background: #111
filter:alpha(opacity=55)
opacity:.55
color: #fff
position: absolute
bottom: 0
left: 0
width: 555px
padding: 10px
border-top: 1px solid #999
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：<img src="small.png" style="border: 0" />。
3、浏览器运行index.html页面，此时img图片的边框被去除了。
根据你的图片，达到这种效果有2种方法：
1.用图片png图片作为背景；
2.可以用纯css就可以达到，举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: #444
}
.test{
width: 15px
height: 30px
box-sizing:border-box
border-top: 15px solid #f5f5f5
border-bottom: 15px solid #f5f5f5
/*border-left: 20px solid #0f0*/
border-right: 15px solid transparent
/* border-top-right-radius: 4px
border-radius: 12px*/
}
.csspic{
width: 200px
height: 400px
margin:50px auto
background: url(images/5.jpg) -15px top no-repeat
-webkit-background-size: cover
background-size: cover
border-radius: 10px
position: relative
border: 15px solid #f5f5f5
-moz-background-clip: border
-webkit-background-clip: border-box
-o-background-clip: border-box
background-clip: border-box
}
.img{
overflow: hidden
width: 260px
height: 400px
}
.sjx{
position: absolute
top:30px
left: -15px
background: url(images/5.jpg) left -30px no-repeat
-webkit-background-size: 500px
background-size: 500px
z-index: 9999
}
.csspic img{
height: 100%
}
</style>
</head>
<body>
<div class="csspic">
<div class="sjx">
<div class="test"></div>
</div>
<div class="img"><!-- <img src="images/5.jpg">--></div>
</div>
</body>
</html>
