CSS学习笔记（2）：基本属性

October 20, 2021 14481

CSS的单位

HTML中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。 CSS中的单位是必须要写的，因为它没有默认单位！

绝对单位

CSS中的绝对单位的关系如下：

1
1 in = 2.54 cm = 25.4 mm = 72 pt = 6 pc

各种单位的含义：

  • in：英寸Inches（1 英寸 = 2.54 厘米）。
  • cm：厘米Centimeters。
  • mm：毫米Millimeters。
  • pt：点Points，或者叫英镑（1点 = 1/72英寸）。
  • pc：皮卡Picas（1 皮卡 = 12 点）。

相对单位

CSS中的相对单位：

  • px：像素。
  • em：印刷单位相当于12个点。
  • %：百分比，相对上一级标签的大小。

像素px之所以是相对单位是因为电脑屏幕的尺寸一定的时候，设置不同的分辨率，每个像素的大小就不一样。

百分比单位是最常用的单位的之一，它表示参照它上级标签的该属性值来设置属性值。

字体属性

CSS中，有很多与布局无关的非布局样式，主要包括字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。字体属性就是其中一种。

常用的字体属性

常见的字体属性有以下几种：

1
2
3
4
5
6
7
8
9
p{
	font-size: 50px;         /*字体大小*/
	line-height: 30px;       /*行高*/
	font-family: 幼圆,黑体;   /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
	font-style: italic ;     /*italic表示斜体，normal表示不倾斜*/
	font-weight: bold;       /*粗体*/
	font-variant: small-caps;/*小写变大写*/
	text-indent: 2em;        /* 首行缩进两个汉字的宽度 */
}

行高

CSS中，所有的行都有行高。行高是与字号息息相关的一个属性，因为行高就像是为一行加上下的padding，这个padding的大小就是通过行高减去字号除以2计算得的（因为文本在一行中总是上下居中显示的）。

因此也一般会约定：行高、字号尽量都设置为偶数，这样可以保证它们的差一定是偶数，从而能够被2整除，可以保证单行文本垂直居中。

此时有一个与此看起来很相关的属性：vertical-align，该属性可以指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要用于图片、表格、文本的对齐。它可能的值有：

  • baseline：默认。元素放置在父元素的基线上。
  • sub：垂直对齐文本的下标。
  • super 垂直对齐文本的上标
  • top：把元素的顶端与行中最高元素的顶端对齐
  • text-top：把元素的顶端与父元素字体的顶端对齐
  • middle：把此元素放置在父元素的中部。
  • bottom：把元素的顶端与行中最低的元素的顶端对齐。
  • text-bottom：把元素的底端与父元素字体的底端对齐。
  • %：使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
  • inherit：规定应该从父元素继承 vertical-align 属性的值。

使用的方法是直接把它作为要设置对齐的行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）元素的属性。

（但是它并不能改变文本在行内的对齐方式！文本在行内居中是默认的。）

简写

字号、行高、字体三大属性是最常用的。

字号：font-size:14px;

行高：line-height:24px;

字体：font-family:"宋体";

因为它们实在太常用了，因此可以把它们连写，格式为：font: 加粗 字号/行高 字体;

如：font: 400 14px/24px "宋体";

其中加粗400是nomal，700是bold。

但是font属性连写有一个要求：连写至少要有字号和字体，否则连写是不生效的（相当于没有这一行代码）。

注意

（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：

1
font-family: "华文彩云";

上方代码中，如果用户的 Windows 电脑里面没有这个字体，那么就会变成宋体。

页面中，中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。

（2）页面中如果需要其他的字体，可以使用font-face：

1
2
3
4
5
6
@font-face
{
  font-family: myFont;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot'); /* IE9 */
}

这个font-face指定名为”myFont”的字体，并指定在哪里可以找到它的URL。

（3）为了防止用户电脑里，没有微软雅黑这个字体，就要提供备选字体，如：（可以备选多个）：

1
font-family: "微软雅黑","宋体";

这行代码表示：如果用户电脑里没有安装微软雅黑字体，那么就使用宋体，如果没有宋体，就使用下一个备选字体，直到所有备选字体都没有，那就使用默认字体。

（4）备选字体列表中，应当将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：

1
font-family: "Times New Roman","微软雅黑","宋体";

如果我们把中文字体写在前面：

1
font-family: "微软雅黑","Times New Roman","宋体";

就会导致，中文和英文都会采用微软雅黑字体，达不到我们希望英文字体是Times New Roman的期望。

（5）所有的中文字体，都有英语别名，如微软雅黑的英语别名：

1
font-family: "Microsoft YaHei";

宋体的英语别名：

1
font-family: "SimSun";

在书写字体名称时可以使用等价的英语别名。

（6）行高可以用百分比，表示字号的百分之多少。

一般来说，百分比都是大于100%的，因为行高一定要大于字号。

比如说：

1
font:12px/200% "宋体";

等价于

1
font:12px/24px "宋体";

200%可以理解成word里面的2倍行高。

反过来：

1
font:16px/48px "宋体";

等价于

1
font:16px/300% "宋体";

（7）字体加粗属性：

1
2
3
4
5
6
7
.div {
	font-weight: normal; /*正常*/
	font-weight: bold;  /*加粗*/
	font-weight: 100;
	font-weight: 200;
	font-weight: 900;
}

在设置字体是否加粗时，属性值既可以填写normal、bold这样的加粗字体，也可以直接填写 100至900 这样的数字。normal的值相当于400，bold的值相当于700。

文本属性

CSS样式中，常见的文本属性有以下几种：

  • letter-spacing:0.5cm;：单个字母之间的间距。
  • word-spacing:1cm;：单词之间的间距。
  • text-decoration:none;：字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线。
  • text-transform:lowercase;：单词字体大小写。uppercase大写、lowercase小写。
  • color:red;：字体颜色。
  • text-align: center;：在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify。
  • text-transform: lowercase;：单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）。

在CSS3中新增了text-shadow属性来设置文本的阴影，如：

1
text-shadow: 20px 27px 22px pink;

四个属性的含义分别为水平位移、垂直位移、模糊程度、阴影颜色。

同时text-shadow可以设置多个阴影，每个阴影之间使用逗号隔开，这样一对黑白阴影组合可以实现凹凸效果：

1
2
3
4
5
6
.tu {
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
.ao {
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

上述代码的凹凸效果如下：

凸起效果凹陷效果

列表属性

列表属性主要有：

  • list-style-type：列表标记的样式。其值可以是none 无标记，disc 默认 实心圆，circle 空心圆，square 实心方块，decimal 数字。
  • list-style-image：把图像设置为列表中的项目标记，如url("/i/arrow.gif")。
  • list-style-position：设置列表中项目标记的位置。取值可以是inside 文本以内，outside 默认值 放置在文本以外，inherit 从父元素继承。

可以把以上属性简写为list-style：

1
2
3
ul {
  list-style: square inside url("sqpurple.gif");
}

在使用简写属性时，属性值的顺序为：

  • list-style-type：如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值。
  • list-style-position：指定列表项标记应显示在内容流的内部还是外部。
  • list-style-image：将图像指定为列表项标记。

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表，而添加到 <li> 标记的属性将影响各个列表项。

背景属性

CSS2中的背景属性

CSS2.1中，常见的背景属性有以下几种：

  • background-color：设置元素的背景颜色。
  • background-image：将图像设置为背景。
  • background-repeat：设置背景图片是否重复及如何重复，默认平铺满。（重要）
    • no-repeat：不要平铺；
    • repeat-x：横向平铺；
    • repeat-y：纵向平铺。
  • background-position：设置背景图片在当前容器中的位置。
  • background-attachment：设置背景图片是否跟着滚动条一起移动。 属性值可以是：
    • scroll（与fixed属性相反，默认属性）。
    • fixed（背景就会被固定住，不会被滚动条滚走）。

另外还有一个简写属性background，可以将上面的多个属性写在一个声明中。

background-color

这个属性的值是颜色值，CSS2.1中，颜色的表示方法有三种：单词、rgb表示法、十六进制表示法：

1
2
3
background-color: red;
background-color: rgb(255,0,0);
background-color: #ff0000;

对于十六进制表示法，#aabbcc是可以化简为#abc的，如红色：

1
background-color: #ff0000;

等价于：

1
background-color: #f00;

再比如：

1
background-color: #112233;

等价于：

1
background-color: #123;

以此类推。

CSS3 中，新的表示颜色的方式有RGBA或者HSLA：

1
2
background-color: rgba(0, 0, 255, 0.3);
background-color: hsla(240,50%,50%,0.4);

在HSLA中：

  • H 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
  • S 饱和度，取值范围 0%~100%。值越大，越鲜艳。
  • L 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
  • A 透明度，取值范围 0~1。

A即Alpha，透明度。RGBA、HSLA可应用于所有使用颜色的地方。

关于透明度还有两个属性可以使用：

  • opacity: 0.3; 会将整个盒子及子盒子设置透明度。
  • background: transparent; 可以单独设置透明度，但设置的是完全透明。

background-image

使用图片来作为背景，如：

1
background-image:url(images/2.gif);

要注意设置的背景是盒子背景，也就是padding的部分也是有背景的。

background-repeat

不使用该属性时默认是横向和纵向都平铺，而使用该属性可以指定只在横向上平铺或者只在纵向上平铺或者不平铺。

background-position

background-position属性是背景定位属性。

在描述属性值的时候，有两种方式：用像素描述、用单词描述。

（1）用像素值描述属性值的格式如下：

1
background-position:向右偏移量 向下偏移量;

属性值可以是正数，也可以是负数。比如：100px 200px、-50px -120px。

（2）用单词描述属性值的格式如下：

1
background-position: 描述左右的词 描述上下的词;

其中：

  • 描述左右的词：left、center、right。
  • 描述上下的词：top 、center、bottom。

right center表示将图片放到右边的中间；center center表示将图片放到正中间。bottom表示图片的底边和父亲底边贴齐。

该属性一般与background-repeat的no-repeat一同使用。

background-attachment

background-attachment属性设置背景图片是否固定。属性值可以是：

  • fixed：背景就会被固定住，不会被滚动条滚走。
  • scroll：背景会随着滚动条一起滚动，默认属性。

background

将上面多个属性写在一起，如：

1
background:red url(1.jpg) no-repeat 100px 100px fixed;

其中是可以省略掉部分字段的，并且之后可以用单独的属性覆盖掉其中的若干字段。

CSS3中的背景属性

CSS3 中，新增了一些background属性：

  • background-origin：背景原点
  • background-clip：背景裁切。
  • background-size：调整尺寸。
  • 多重背景

background-origin

background-origin 属性：控制背景从什么地方开始显示。

使用方式如下：

1
2
3
4
5
6
/* 从 padding-box 内边距开始显示背景图（默认值） */
background-origin: padding-box;
/* 从 border-box 边框开始显示背景图  */
background-origin: border-box;
/* 从 content-box 内容区域开始显示背景图  */
background-origin: content-box;

background-clip

background-clip属性：设置元素的背景（背景图片或颜色）是否延伸到指定区域外面，如果不让延伸到外面，超出某个界限的部分将被裁切掉。

属性值可以是：

  • border-box：超出 border-box 的部分，将裁剪掉。
  • padding-box：超出 padding-box 的部分，将裁剪掉。
  • content-box：超出 content-box 的部分，将裁剪掉。

background-origin常常和background-clip搭配使用。如果现在有这样的属性设置：

1
2
background-origin: border-box;
background-clip: content-box;

那么背景图片从边框部分开始加载，但是超出内容区域的部分将被裁减掉。

background-size

background-size属性：设置背景图片的尺寸。

有如下几种使用方式：

1
2
3
4
5
6
7
8
9
/* 宽、高的具体数值 */
background-size: 500px 500px;
/* 宽高的百分比（相对于容器的大小） */
background-size: 50% 50%;   // 如果两个属性值相同，可以简写成：background-size: 50%;
background-size: 100% auto;  // 缩放长，宽按比例计算
/* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
background-size: cover;
/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。  */
background-size: contain;

多重背景

可以给一个盒子同时设置多个背景，用以逗号隔开即可，常用于自适应局。

1
2
3
4
5
6
/* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
background: url(images/bg1.png) no-repeat left top,
    url(images/bg2.png) no-repeat right top,
    url(images/bg3.png) no-repeat right bottom,
    url(images/bg4.png) no-repeat left bottom,
    url(images/bg5.png) no-repeat center;

多重背景常常用png格式的透明图片来设置，可以做出有创意的效果。

渐变

CSS3支持渐变作为背景，使用的属性还是background-image。

支持的渐变有三种：

  • 线性渐变：沿着某条直线朝一个方向产生渐变效果。
  • 径向渐变：从一个中心点开始沿着四周产生渐变效果。
  • 重复渐变。

（1）线性渐变：

格式：

1
2
background-image: linear-gradient(方向, 起始颜色, 终止颜色);
background-image: linear-gradient(方向, 颜色1 位置1, 颜色2 位置2, ……);

其中方向可以是to left、to right、to top、to bottom或者使用角度角度，30deg指的是顺时针方向30°。默认方向是从上往下。

有以下例子：

1
2
3
4
5
6
7
8
9
10
11
background-image: linear-gradient(yellow, green);
background-image: linear-gradient(to right, yellow, green);
background-image: linear-gradient(135deg, yellow, green);
background-image: linear-gradient(to right,
    yellow 0%, red 40%, green 70%, blue 100%);
background-image: linear-gradient(45deg,
    yellow 0%, yellow 25%, blue 25%, blue 50%,
    red 50%, red 75%, green 75%, green 100%);
background-image: linear-gradient(to right,
    #000 0%, #000 25%, #fff 25%, #fff 50%,
    #000 50%, #000 75%, #fff 75%, #fff 100%);

以上渐变代码的效果分别如下：

（2）径向渐变：

格式：

1
background-image: radial-gradient(辐射的半径大小 中心的位置, 起始颜色, 终止颜色);

如：

1
background-image: radial-gradient(25px at center,yellow ,green);

中心点的位置和background-position属性的值一样。辐射半径并不一定只能是一个值，如果是两个值，说明分别设置了辐射半径的宽高，宽高不同的辐射半径将是一个椭圆状辐射。

注意：辐射半径和中心点的位置之间没有逗号分隔。

有以下例子：

1
2
3
4
5
6
background-image: radial-gradient(25px at center, yellow, green);
background-image: radial-gradient(at left top, yellow, green);
background-image: radial-gradient(at 50px 50px, yellow, green);
background-image: radial-gradient(25px at center,
    yellow 0%, green 30%, blue 60%, red 100%);
background-image: radial-gradient(30px 15px at center, yellow, green);

以上渐变代码的效果分别如下：

所有的背景属性是经常用到的，一定要牢牢记住。

定位属性

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位：

1
2
3
position: absolute;  /* 绝对定位 */
position: relative;  /* 相对定位 */
position: fixed;     /* 固定定位 */

相对定位

让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。实现方法：

1
2
3
position: relative;
left: 50px;
top: 50px;

这样使得元素在原有位置的基础上相对于left和top偏移。

要注意相对定位的特点就是相对定位不脱标，老家留坑，别人不会把它的位置挤走。也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。

相对定位的定位值：

  • left：盒子右移。
  • right：盒子左移。
  • top：盒子下移。
  • bottom：盒子上移。

定位值可取负数，这样会向相反方向偏移。

绝对定位

定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。如：

1
2
3
position: absolute; /*绝对定位*/
left: 10px;         /*横坐标*/
top: 20px;          /*纵坐标*/

如果使用top，原点就是在父容器左上角，如果把top换为bottom，原点就在左下角。

绝对定位的特点是绝对定位脱标，老家不留位置。绝对定位的盒子脱离了标准文档流，所有的标准文档流的性质，绝对定位之后都不遵守了。因此绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。

要注意关于参考点的问题：

  • 一个绝对定位的元素，如果祖先元素中出现了已定位（无论是绝对定位、相对定位还是固定定位）的元素，那么将以嵌套关系最近的祖先元素为参考进行绝对定位。
  • 如果没有已定位的祖先元素，从左上角定位就以页面左上角为参考点，而从左下角定位就以浏览器首屏左下角为参考点。（或者可以说都是以浏览器首屏为参考来定位的）
  • 绝对定位的儿子，无视做参考的那个盒子的padding，但是会在border内定位。

子绝父相常用来做精灵图和压盖效果。

如果盒子是绝对定位的，其父亲是相对定位的，可以这样使得盒子在父亲中水平居中：

1
2
3
4
5
6
7
8
div {
	width: 600px;
	height: 60px;
	position: absolute;  // 绝对定位的盒子
	left: 50%;           // 首先，让左边线居中
	top: 0;
	margin-left: -300px;  // 然后，向左移动宽度（600px）的一半
}

竖直居中也是同样的道理。

此外绝对定位时有一个非常常用的z-index属性：表示谁压着谁。数值大的压盖住数值小的。在默认情况下是dom中在后的元素压盖住在前面的元素，而使用这个属性可以任意设置谁压盖谁。

固定定位

就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。

注意：IE6不兼容。

固定定位也是通过使用left、right、top、bottom来实现定位。

常用于“返回顶部”按钮以及导航条。

边框属性

边框的属性很多，其中边框圆角和边框阴影这两个属性，应用十分广泛，兼容性也相对较好，且符合渐进增强的原则。

边框

border-style属性指定要显示的边框类型。可以设置一到四个值（用于上边框、右边框、下边框和左边框）。可选的值有：

  • dotted：点线边框
  • dashed：虚线边框
  • solid：实线边框
  • double：双边框
  • groove：3D坡口边框。效果取决于 border-color 值
  • ridge：3D脊线边框。效果取决于 border-color 值
  • inset：3D inset边框。效果取决于 border-color 值
  • outset：3D outset边框。效果取决于 border-color 值
  • none：无边框
  • hidden：隐藏边框

它可以设置一到四个值，含义分别是：

  • 一个值：所有边框的样式。
  • 两个值：上下边框的样式、左右边框的样式。
  • 三个值：上边框的样式、左右边框的样式、下边框的样式。
  • 四个值：上、右、下、左四条边框分别的样式。

要使用边框，border-style属性是必须设置的，如果没有该属性，其他的边框属性都不会生效。

其他基本边框属性：

  • border-width属性：指定四个边框的宽度。可以使用以下三个预定义值之一：thin、medium 或 thick。同样可以设置一到四个值。
  • border-color属性：用于设置四个边框的颜色。如果未设置 border-color，则它将继承元素的颜色。同样可以设置一到四个值。
  • 单独设置某条边的值：
    • border-top-style：上边框样式。
    • border-right-style：右边框样式。
    • border-bottom-style：下边框样式。
    • border-left-style：左边框样式。

border属性可以简写，如：

1
border: 5px solid red;

三个属性分别为边框粗细、边框样式、边框颜色。其中边框样式是必写字段。

边框圆角

边框圆角：border-radius 属性。

边框的每个圆角，本质上是一个圆，圆有水平半径和垂直半径：如果二者相等，就是圆；如果二者不等， 就是椭圆。

单个属性的写法：

1
2
3
4
border-top-left-radius: 60px 120px;
border-top-right-radius: 60px 120px;
border-bottom-left-radius: 60px 120px;
border-bottom-right-radius: 60px 120px;

两个参数分别是水平半径和垂直半径。

复合写法：

1
2
3
4
border-radius: 60px/120px;     /*设置水平半径/垂直半径，四个角一样*/
border-radius: 20px 60px 100px 140px; /*从左上开始，顺时针赋值*/
border-radius: 20px 60px;      /*如果某些角没有值，取对角的值*/
border-radius: 60px;           /*四个角水平、垂直半径都一样*/

边框阴影

边框阴影：box-shadow 属性。

格式：

1
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色

如：

1
box-shadow: 15px 21px 48px 2px #666;

参数解释：

  • 水平偏移：正值向右 负值向左。
  • 垂直偏移：正值向下 负值向上。
  • 模糊程度：不能为负值。

另外，后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。例如：

1
box-shadow:3px 3px 3px 3px #666 inset;

设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。

同样可以设置多重边框阴影。

边框图片

通过使用 CSS border-image 属性，可以设置图像用作围绕元素的边框。

该属性有三部分：

  • border-image-source：用作边框的图像。
  • border-image-slice：在哪里裁切图像。
  • border-image-repeat：定义中间部分应重复还是拉伸。可取的属性值：
    • repeat：正常平铺但是可能会显示不完整。
    • round：平铺但是保证图片完整。
    • stretch：拉伸显示。

或者合写为一个border-image属性。

该属性会把属性图片裁切为九宫格，四角的图片保持不动，四边的图片水平或竖直重复。
边框圆角、边框阴影、边框图片都是CSS3的内容。

其他常用属性

overflow属性

overflow属性的属性值可以是：

  • visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
  • hidden：不显示超过对象尺寸的内容。
  • auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
  • scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。

也就是说overflow属性规定了元素中内容超出元素大小时的处理方法。

鼠标属性

如果想让鼠标放在那个标签上时，鼠标改变形状，可以使用:hover选择器并设置cursor属性，如：

1
2
3
p:hover{
	cursor: pointer;
}

最常用的鼠标属性值有：

  • auto：默认值。浏览器根据当前情况自动确定鼠标光标类型。
  • pointer：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
  • hand：和pointer的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

其余属性值需要时查表即可。

滤镜属性

即filter属性，对图像使用添加滤镜，可用的滤镜函数主要有：

  • none：默认值。规定无效果。
  • blur(px)：对图像应用模糊效果。较大的值将产生更多的模糊。
  • brightness(%)：调整图像的亮度。0％ 将使图像完全变黑。默认值是 100％，代表原始图像。值超过 100％ 将提供更明亮的结果。
  • grayscale(%)：将图像转换为灰阶。0%是默认值，代表原始图像。100％ 将使图像完全变灰（用于黑白图像）。不允许负值。
  • opacity(%)：设置图像的不透明度级别。opacity-level 描述了透明度级别，其中0% 为完全透明。100% (1) 是默认值，代表原始图像（不透明）。不允许负值。
  • ……

clip-path属性

clip-path属性不是背景属性，但是它非常强大，常常和背景属性一起使用。

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

clip-path属性即使做了任何裁剪，容器的占位大小是不变的。

有以下例子：（鼠标悬停时，放大裁剪的区域）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.div1 {
    width: 320px;
    height: 320px;
    border: 1px solid red;
    background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat;
    background-size: cover;
    /* 裁剪出圆形区域 */
    clip-path: circle(50px at 100px 100px);
    transition: clip-path .4s;
}
.div1:hover{
    /* 鼠标悬停时，裁剪出更大的圆形 */
    clip-path: circle(80px at 100px 100px);
}

例子中是裁剪出了一个圆形区域，实际上该属性支持的区域类型更多：

（1）inset() : 定义一个矩形 。

它接受五个参数：分别对应top,right,bottom,left的裁剪位置和round radius圆角，如：

1
clip-path: inset(2em 3em 2em 1em round 2em);

（2）circle()：定义一个圆。

参数分别是圆的半径at圆心位置，如：

1
clip-path: circle(30% at 150px 120px);

（3）ellipse()：定义一个椭圆。

参数有三个：

  • 椭圆的X轴半径，默认是宽度的一半，支持百分比。
  • 椭圆的Y轴半径，默认是高度的一半，支持百分比。
  • 椭圆中心位置，默认是元素的中心点。

如：

1
clip-path: ellipse(45% 30% at 50% 50%);

（4）polygon()：定义一个多边形。

用若干逗号分隔的坐标对来确定一个多边形，最后自动封口，如：

1
clip-path: polygon(50% 0,100% 50%,0 100%);

此外该属性还支持使用svg和盒子来进行裁剪



* 你好，我是大森。如果文章内容帮到了你，你可通过下方付款二维码支持作者 *