CSS 图片

border-radius属性

CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、px、百分比等等。

圆角图片：

椭圆图片：

使用 border 属性来创建缩略图。

      
  
创建缩略图。
   

响应式图片

响应式图片会自动适配各种尺寸的屏幕。

如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

      
  
响应式图片
   

卡片式图片

      
  
  
 
第一张图片
 
 
 
  
 
第二章图片
 
 
  

filter属性

Alpha 设置透明度

Blur 设置模糊效果
Chroma 设置指定颜色透明

Dropshadow 设置投射阴影
Fliph 水平翻转

Flipv 垂直翻转
Glow 对象的外边界增加光效

Grayscale 设置灰度(降低图片的色彩度)
Invert 设置底片效果

Light 设置灯光投影
Mask 设置透明膜

Shadow 设置阴影效果
Wave 利用正弦波纹打乱图片

Xray 只显示轮廓

响应式图片相册

      
  
 
    
第一张图
 
 
 
 
    
第二张图
 
 
 
 
    
第三张图
 
 
 
 
    
第四张图
 
 
 
 
  

图片 Modal(模态)

本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。

首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。

然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：

      
    
 ×