图片边框样式

1:

/*图片边框 */
{
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ffffff;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: #ffffff;
filter:progid:dximagetransform.microsoft.glow(color=#000000,strength=3);

 

2

图片边框效果主要有两种,较简单的方法是直接在CSS文件中对img定义边界(border),例如我在CSS中定义了:
img.framed {
padding: 6px;
border: 1px solid #CCC;
background-color: #FFF; }

那么在HTML文件中,或者在blog更新的时候,针对嵌入的图片定义class="framed"就会有相应的边框效果。

<img src="......" class="framed" >

 

上面的方法的优点是比较简单,但实现的效果比较单调,并不一定能达到令人满意的效果和一些特殊效果,例如阴影,色彩变化等等。下面介绍第二种方法,比第一种稍微复杂一些。很多Blogger喜欢在每篇文章中附带一副固定大小的图片,图文并茂的网页看起来更加生动。这个时候我们可以为图片设计更加个性化的边框效果,让网页的视觉效果更加丰富,不过这种方法需要对图片大小进行限制。

实例:CSS图片边框效果 - CSS Image Frame

首先需要制作一个边框效果的背景图片,然后在CSS中对背景边框定义图片替代(Image replacement)和定位和平移。我制作了一个例子,有兴趣的朋友可以下载源文件并在自己的网页中进行实验。特别指出,这个效果中图片尺寸是:163px X 105px

Css-Image-Frame

很多朋友会奇怪为什么需要3个框,上图演示了边框效果图在CSS定义中的处理过程,可以看到,在边框效果背景文件中的3个框,分别为默认鼠标划过,以及点击后定义了不同的效果。然后通过CSS中的定位平移进行控制。在CSS网页设计中,图片替代以及定位平移是经常使用的技巧,这种方法不但解决了对于不同浏览器之间的适用性,也避免了负载图片过大而影响浏览速度的问题。更重要的是方便易用,我们不需要使用Photoshop对所有图片进行边框加工而能快速实现边框效果。[参考:实现CSS图片边框效果的方法]

 

     /*Photo frame CSS style*/
    .photos-hor .photo
{
      float
: left;
      width
: 185px;
      margin-bottom
: 12px;
    
}

    
    .photos-hor a
{
      display
: block;
      text-decoration
: none;
      background
: #fff url(img/img-bg.png) 0 0 no-repeat;
      color
: #002C79;
      font-size
: 0.85em;
    
}

    
    .photos-hor a:visited
{
      background-position
: -371px 0;
      color
: #7E7E7E;
    
}

    
    .photos-hor a:hover
{
      background-position
: -185px 0;
      color
: #C24F00;
    
}

    
    .photos-hor span.desc
{
      display
: block;
      text-align
: center;
    
}

    
    .photos-hor img
{
      display
: inline;
      margin
: 11px 11px 8px 11px;
      width
: 163px;
      height
: 105px;
    
}

    
    .photos-hor
{ text-align: center; }
    
    .photos-hor .photos-3
{ width: 555px; margin: auto; }
    .photos-hor .photos-2
{ width: 370px; margin: auto; }
    
/* end hack */

3.

 

.img_border  {
BORDER-RIGHT
: #d8d8d8 1px solid; 
PADDING-RIGHT
: 3px; 
BORDER-TOP
: #d8d8d8 1px solid; 
PADDING-LEFT
: 3px; 

BACKGROUND
: #eaeaea; 

PADDING-BOTTOM
: 3px; 
BORDER-LEFT
: #d8d8d8 1px solid; 
PADDING-TOP
: 3px; 
BORDER-BOTTOM
: #d8d8d8 1px solid
}

 

< IMG  class =img_border  alt ="边框样式3"  src ="biankuang.jpg" >

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值