目录
@规则
- @import " 路径 "; ——> 导入另一个css文件
- @charset " utf-8 "; ——> 告诉浏览器使用的字符编码集
web图标及引用
- 网站：icon font.cn
- 在css文件中引用方式:
<head>中：
<link href=" 项目的地址链接 " >
<body>中：
<div class="iconfont + 复制的图标名 " >< div >
背景图的应用
- 应用：background : url ( 图片的路径 ） 是否重复 位置 / 长宽大小 ;
- 注意：多背景图连用是要用逗号隔开；
- 具体属性：
- background-repeat
可取值：repeat 或 no-repeat ；
- background-size
可取值：contain（图片被背景全包含）、cover（图片全覆盖背景）、数值或百分比
- background-position
可取值：left、bottom、right、top、center、数值或百分比
- background-attachment
通常用它控制背景图是否固定
可取值：fixed、local 、scroll
盒子模糊化处理
- 应用属性：filter——滤镜
- 语法：
filter：blur（ n px ）;
- 含义：括号内 n px 的大小代表模糊的程度，数值越大盒子越模糊
边缘阴影处理
box-shadow——盒子阴影
- 可取值：
- h-shadow： 水平阴影相对位置；
- v-shadow： 垂直阴影相对位置；
- blur： 阴影模糊程度；
- spread： 阴影扩散距离；
- color：颜色；
- 添加属性：inset（如果将阴影改为内部）
- 注意：阴影不占空间，不影响其他盒子排列
- 速写：box-shadow：1 2 3 4 5 ；
text-shadow——文字阴影
- 可取值：
1.h-shadow： 水平阴影相对位置；
2.v-shadow： 垂直阴影相对位置；
3.blur： 阴影模糊程度；
4.color：颜色；
-
速写：box-shadow：1 2 3 4；
过渡效果
- 应用属性：transition——过渡
- 语法：
transition : 要过渡的属性 花费时间 运动曲线 何时开始 ；
- 可取值：
- 要过渡的属性：想要变化的css属性，可以是 宽度高度、背景颜色、内外边距 。如果想要所有的属性都变化过渡，写 all
- 花费时间：单位是秒（必须写单位） 比如 0.5s
- 运动曲线：默认是ease（可以省略）、linear
- 何时开始：单位是秒（必须写单位）可以设置迟触发时间 默认是0s（可以省略）
- 注意：
- 谁要过渡给谁加；
- 写多个属性时，要利用 逗号 分割。
背景线性渐变
-
语法：background : linear-gradient ( 起始方向，颜色1，颜色2... )
-
实际应用：（要加浏览器私有前缀）
background : -webkit- linear-gradient ( 起始方向，颜色1，颜色2... ) , 也可改为 方位名词 或 度数 ，默认 top .
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
