跳到主要内容

图片边框

  • border-style ： none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
  • border-color: color
  • border-width: length | thin | medium | thick

图片大小​

  • width : length | percentage | auto
  • height: length | percentage | auto

图片对齐​

采用 文本的 对齐方式。

半透明图片​

opacity ： length

取值在 0 ~ 1 之间

filter​

filter 属性通常定义 img 的视觉效果（如饱和度和模糊度）

filter: none | /* 默认值*/ blur() | /* 对图像应用模糊效果，值越大越模糊*/
  brightness() | /* 调整图像的亮度，0%是黑 */ contrast() |
  /* 调整图像的对比度，0%是全黑*/ drop-shadow() | /* 对图像应用阴影效果 */
  grayscale() | /* 将图像转换为灰阶 */ hue-rotate() |
  /* 在图像上应用色相旋转（0·360deg ）*/ invert() |
  /* 反转图像中的样本（0%·100%） */ opacity() | /* 设置图像不透明度*/ saturate()
  | /* 设置图像的饱和度 */ sepia() | /* 将图像转为棕褐色 */ url();
/* 接受规定 SVG 滤镜的 XML 文件的位置*/
-webkit-filter: none | /* 默认值 */ blur() |;

圆角图片​

border-radius ： none | length

阴影图片​

border-shadow ： none | shadow

box-shadow 的使用比较灵活，可同时设置多效果叠加。

stretch​

将显示方法指定为 stretch 时，图像将以拉伸的方式进行显示。

repeat+stretch​

可以将上下两条边中图像的显示方式指定为平铺显示，左右两条边中图像的显示方式指定为拉伸显示，或者将上下两条边中图像的显示方式指定为拉伸显示，左右两条边中图像的显示方式指定为平铺显示。使用第一种指定方式时，中央图像在水平方向为平铺显示，垂直方向为拉伸显示；使用第二种指定方式时，中央图像在水平方向为拉伸显示，垂直方向为平铺显示。

object-fit 属性​

object-fit 属性用以规定应如何调整 <img> 和 <video> 的大小以适应容器

object-fit: fill|contain|cover|scale-down|none|initial|inherit;
  • fill ： 默认值，调整替换内容的大小以填充元素的内容框。如有必要，对象被拉伸或挤压
  • contain ：缩放被替换内容以保持其宽高比，同时适合元素的内容框
  • cover ： 调整被替换内容，以在填充元素的整个内容框时保持其长宽比。该对象将会被裁剪
  • none ： 替换内容不会调整大小
  • scale-down ： 内容的尺寸与 none 或 contain 中的一个一致，取决于他们两个之间谁的对象尺寸更小一些
  • initial ： 默认
  • inherit ： 继承

object-position​

object-position: position|initial|inherit;

调整元素的位置，以适应包含框