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属性
属性 | |
---|---|
background-color | 规定要使用的背景颜色。 |
background-position | 规定背景图像的位置。 |
background-size | 规定背景图片的尺寸。 |
background-origin | 规定背景图片的定位区域。 |
background-clip | 规定背景的绘制区域。 |
background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 |
background-image | 规定要使用的背景图像。 |
background-repeat | 规定如何重复背景图像。 |
复合 使用方法例如:
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会让阴影伸展得和元素的大小一样。
- 第五个,设置颜色颜色值
渐变
-
线性渐变
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%);
-
径向渐变
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%);
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%);