所谓视觉类样式，是指不影响盒子位置、尺寸的样式，例如文字颜色、背景颜色、背景图片等

阴影

盒子阴影

MDN 详细文档

通过box-shadow属性可以设置整个盒子的阴影

下面是一些示例

文字阴影

MDN 详细文档

通过text-shadow可以设置文字阴影

下面是一些示例

圆角

MDN 详细文档

通过设置border-radius，可以设置盒子的圆角

border-radius可以有很多灵活的用法，将下面的代码依次粘贴到页面中测试一下

1
2
3

border-radius: 10px; /* 同时设置4个角的圆角，半径为10px */
border-radius: 50%; /* 同时设置4个角的圆角，圆的横向半径为宽度一半，纵向半径为高度一半 */
border-radius: 10px 20px 30px 40px; /* 分别设置左上、右上、右下、左下的圆角 */

背景渐变

MDN 详细文档

在设置背景图片时，除了可以使用url()加载一张背景图，还可以使用linear-gradient()函数设置背景渐变

linear-gradient()用于创建一张渐变的图片，语法为：

1
2

/* 设置渐变背景，方向：从上到下，颜色：从#e66465渐变到#9198e5 */
background: linear-gradient(to bottom, #e66465, #9198e5);

变形

MDN 详细文档

通过transform属性，可以使盒子的形态发生变化

该属性支持多种变形方案，常见的有:

• translate，平移
• scale，缩放
• rotate，旋转
  无论是哪一种 transform，都只是视觉效果的变化，不会影响盒子的布局
  transform 不会导致浏览器 reflow 和 rerender，因此效率极高

translate 平移

使用translate可以让盒子在原来位置上产生位移，类似于相对定位

scale 缩放

使用translate可以让盒子在基于原来的尺寸发生缩放

rotate 旋转

使用rotate属性可以在原图基础上进行旋转

1
2
3
4

/* 在原图的基础上，顺时针旋转45度角 */
transform: rotate(45deg);
/* 在原图的基础上，顺时针旋转半圈 */
transform: rotate(0.5turn);

可以点击下面的按钮试一下旋转效果

例子链接

改变变形原点

MDN 详细文档

变形原点的位置，会影响到具体的变形行为

默认情况下，变形的原点在盒子中心，你可以通过transform-origin来改变它

1
2
3
4

transform-origin: center; /* 设置原点在盒子中心 */
transform-origin: left top; /* 设置原点在盒子左上角 */
transform-origin: right bottom; /* 设置原点在盒子右下角 */
transform-origin: 30px 60px; /* 设置原点在盒子坐标 (30, 60) 位置 */

试一试，先点击设置原点的按钮来设置原点(已在图片中使用红色小点标记)，然后点击变形按钮进行变形

例子链接

多种变形叠加

可以一次性设置多种变形效果

1
2
3
4

/* 先旋转45度，再平移(100,100) */
transform: rotate(45deg) translate(100px, 100px);
/* 先平移(100, 100)，再旋转45度 */
transform: translate(100px, 100px) rotate(45deg);

注意：旋转会导致坐标系也跟着旋转，从而可能影响到后续的变形效果

下面的例子可以很好的说明这一点

例子链接