`
zhangyaochun
  • 浏览: 2610634 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

如果画圆角图片效果

css 
阅读更多

 

    原效果在  http://smashingconf.com/

 

    主要的点:

 

 

<li>
      <a class="image-link" href="http://smashingconf.com/speakers/lea-verou">
        <img src="http://smashingconf.com/content/02-speakers/00-lea-verou/lea-verou.jpg" width="195" height="195" alt="Lea Verou">        <span class="caption">
          <span class="name">Lea Verou</span>
          <span class="talk">
            TBA          
          </span>
        </span>
      </a>
</li>

 

   a:

 

.speakers-grid li a {
  position: relative;
  display: block;
}

 

   li:

 

.image-grid li {
  position: relative;
  float: left;
  list-style: none;
  margin: 0 2% 2% 0;
  width: 23%;
  line-height: 0;
}

  

 

 

 

 

   img:

 

  • 直接是img用border-radius:50%
  • 当然img也有border:10px solid #e6f4fd;
.image-grid img {
   width: 100%;
   height: auto;
   border-radius: 50%;
   border: 10px solid #e6f4fd;
   -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   -moz-transition: border ease .3s;
   -webkit-transition: border ease .3s;
   -o-transition: border ease .3s;
   transition: border ease .3s;
}

 

 

 

分享到:
评论

相关推荐

    易语言Exdui无锯齿自定义圆角图片框

    4. **纹理画刷**:GDI+中的一个对象,用于填充图形区域,它可以使用位图或图案作为画刷,从而实现复杂的效果,如圆角图片框的绘制。 5. **自定义圆角**:开发者可以通过编程设置图片框的四个角的圆角半径,实现个性...

    圆角图片Demo

    在移动优先的设计理念下,圆角图片需要在不同设备和屏幕尺寸下保持一致的视觉效果。可以使用媒体查询(`@media`)来根据屏幕尺寸调整`border-radius`值,确保在所有设备上都看起来美观。 8. 性能优化: 尽管CSS3...

    五屏Flash圆角图片切换效果.rar

    【五屏Flash圆角图片切换效果】是一种常见的网页动态展示技术,主要应用于网站的首页或者产品展示区域,为用户提供一种视觉上的吸引力。这种效果通过Flash技术实现,Flash在早期的网页设计中扮演了重要角色,提供了...

    android 指定角的圆角图片处理

    总的来说,`BitmapFillet`类提供了一种高效且灵活的方式来处理Android应用中的圆角图片,可以根据需求指定任意一个或多个角进行圆角化,适用于手机界面图标或其他需要定制圆角的UI元素。这种技术对于提升应用的视觉...

    显示圆角图片

    在IT领域,尤其是在UI设计和图像处理中,创建圆角图片是一种常见的需求。GDI+(Graphics Device Interface Plus)是Windows编程中用于图形绘制的一种API,它可以用来实现各种复杂的图像操作,包括创建圆角效果。本篇...

    自定义圆角图片Demo

    在Android开发中,有时我们需要为应用的UI设计添加一些特殊效果,比如自定义圆角图片。这个"自定义圆角图片Demo"项目就是一个很好的实践,它涵盖了如何自定义一个ImageView来实现图片显示为圆角,以及如何处理可能...

    安卓 圆角图片控件

    在安卓开发中,实现圆角图片控件是一个常见的需求,它可以用于用户头像、商品图片等展示,提高应用界面的美观度和用户体验。本篇将详细介绍如何在Android中创建一个圆角图片控件,以及相关的技术点。 首先,我们...

    创意的圆角图片手风琴代码.zip

    本文将深入探讨“创意的圆角图片手风琴代码”这一主题,这是利用jQuery和CSS3实现的一个独特功能,旨在为用户提供一个水平滑动的手风琴效果,同时确保在不同屏幕尺寸下的自适应布局以及圆角图片的兼容性。...

    Android图片倒影+圆角图片

    这个话题涵盖了两个方面:创建图片的倒影效果和制作圆角图片。这两个特性可以用于提升应用的用户体验,使其看起来更加美观和专业。 首先,我们来讨论如何在Android中实现图片的倒影效果。倒影效果通常在UI设计中...

    android图片圆角处理

    在Android开发中,图片圆角处理是一个...不论是使用原生的Bitmap、Canvas,还是利用第三方库,都能实现高质量的圆角图片效果。在实际开发中,还要注意性能优化,避免在大图或者频繁刷新时对内存和CPU造成过大的负担。

    图片圆角处理.NET

    最后,使用`TextureBrush`填充这个路径,使得原始图片的每个像素根据路径的形状进行显示,从而实现了圆角图片。 虽然这段代码没有实现阴影效果,但在实际应用中,可以考虑在填充路径之前或之后添加阴影效果。这通常...

    imageview图片圆角方法

    在Android开发中,对ImageView中的图片进行圆角处理是一种常见的需求,这不仅能够提升应用的美观度,还能根据不同的场景创造出更加和谐的视觉效果。本文将深入探讨如何使用自定义方法来实现ImageView中图片的圆角...

    挂牌式图片上下翻页广告 JS 圆角图片轮播

    再者,"圆角图片"是CSS3的一个特性,通过设置border-radius属性可以使图像的四个角变得圆润,营造出更现代、更友好的视觉效果。在这个广告轮播中,圆角图片可以增加设计的层次感,减少尖锐边角带来的不适感,使整个...

    圆角图片js corner.js 支持IE9

    总之,"corner.js"是一个专为实现圆角图片效果而设计的JavaScript库,尤其适用于需要兼容IE9及以下版本的项目。通过引入此库,开发者可以轻松地为图片添加圆角效果,提升网页的视觉表现。随着技术的进步,虽然CSS3的...

    Android自定义圆形图片和圆角图片

    我们可以通过加载本地资源、网络资源等方式获取Bitmap,然后进行各种图像操作,包括转换为圆形或圆角图片。 1. **创建圆形图片** 要创建圆形图片,最常用的方法是使用`BitmapShader`和`Paint`类。`BitmapShader`...

    iOS UITablecell画圆角

    在设计上,我们有时希望`UITableViewCell`的背景视图或内容视图具有圆角效果,以增加界面的美观度和用户体验。本文将深入探讨如何在iOS中实现`UITableViewCell`的圆角效果。 首先,我们需要理解`UITableViewCell`的...

    HTML5 canvas画圆角框

    这篇博客"HTML5 canvas画圆角框"主要探讨了如何使用canvas API来绘制具有圆角的矩形框。 在HTML5中,`&lt;canvas&gt;`元素是一个画布,通过JavaScript的`CanvasRenderingContext2D`对象,我们可以在这个画布上进行绘图...

    Android BitmapShader 实现圆形、圆角图片

    在给定的标题“Android BitmapShader 实现圆形、圆角图片”中,我们主要探讨如何利用BitmapShader来创建圆形和圆角的图片展示。BitmapShader可以让我们控制Bitmap的渲染方式,从而实现各种形状的图片,而不仅仅是...

    图片的圆角显示

    在实际应用中,可以将这个自定义控件添加到布局文件中,通过XML属性或代码设置圆角大小,从而轻松实现各种圆角图片的效果。这个自定义控件的简洁性和实用性体现了Android开发中自定义组件的魅力,使得开发者能够根据...

    gif透明实现图片圆角效果

    在IT行业中,尤其是在前端开发领域,为图片添加圆角效果是一种常见的需求,这可以提升界面的美观度和用户体验。在本案例中,我们将探讨如何利用`gif`图像来实现图片的圆角效果,特别是通过一个名为`blank.gif`的特殊...

Global site tag (gtag.js) - Google Analytics