HTML标签

CSS字体样式属性

text-shadow

  该属性的作用为为页面中的文本添加阴影效果；通过设置它可以让网页中的文本有外发光，辉光，投影，浮雕，模糊，影子，描边，3D等效果。 写法通常如下   text-shadow:2px 2px 2px #fff；这四个值分别代表   X轴，Y轴，模糊程度(不可是负值)，阴影颜色

font-awesome

是一个图标字体库，它提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果；它不需要引入一些繁琐的文件 只需要几个命令就可以直接使用icon图标。 方法有:   直接导入   <link rel=“stylesheet” href=“path/to/font-awesome/css/font-awesome.min.css”>   定义安装   npm install font-awesome-sass   使用方法即是 <i class="-引用的图标">

background属性

复合 使用方法例如:

 h1
  { 
  background: #000000 url(图片地址) no-repeat  fixed top;
  }  

box-shadow盒阴影

  它允许我们在几乎任何元素上来创建阴影效果可以让原本平面的、二维的页面上面创建出深度（第三维）的错觉。 box的常用格式为: box-shadow: offset-x offset-y blur spread color position;

• 第一个长度值指定了阴影的水平偏移量。即在x轴上阴影的位置。正值在右边，而负值在元素的左边。
• 第二个长度值指定了阴影的垂直偏移量。即在y轴上阴影的位置。正值在元素的上边，而负值在下边.
• 第三个长度值代表阴影的模糊半径。负值是不被允许的，并会被处理成0。
• 第四个代表着阴影的尺寸。这个值可以被想象成从元素到阴影的距离。正值会在元素的各个方向按指定的数值延伸阴影。负值会使阴影收缩得比元素本身尺寸还小。默认值0会让阴影伸展得和元素的大小一样。
• 第五个，设置颜色颜色值

渐变

1. 线性渐变 linear-gradient 线性渐变，指沿着某条直线朝一个方向产生渐变效果。 语法格式为 ：linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>*]) 第一个参数表示线性渐变的方向(to left;to right;to top;to buttom)， 第二个参数是起点颜色；第三个参数是重点颜色可以添加多种颜色；表示多种颜色的渐变 例如:

background: linear-gradient(to right, blue 0%, red 50%, ,black 25%,blue 25%, blue 100%);

1. 径向渐变 radial-gradient: 径向渐变 指从一个中心店开始沿着四周产生渐变效果。 语法格式:<radial-gradient> = radial-gradient([<shape>||<size>][at <position>]?,|[at<position>]?<color-stop>[,<color-stop>]+); position确定圆心的位置 shape：渐变的形状（默认椭圆） size：渐变的大小 color指定颜色 例如

				radial-gradient(circle closest-side at center center,
					blue 0%, red10%,
					yellow 10%,black 20%);

1. 重复渐变 即让渐变重复执行; 语法为: repeating-radial-gradient repeating-linear-gradient

background: 
repeating-background: linear-gradient(to right, blue 0%, red 50%, ,black 25%,blue 25%, blue 100%);
background: repeating-radial-gradient(circle closest-side at center center,
					blue 0%, red10%,
					yellow 10%,black 20%);