1. 盒子暗影
- box-shadow: 程度偏移 垂直偏移 暗影含糊大小 暗影大小 暗影色彩 暗影地位 (inset: 外面);
- 程度及垂直 向右和向下为负数, 反之为正数
2. 文本暗影
- text-shadow: 程度偏移 垂直偏移 暗影含糊大小 暗影色彩
- 值的特点和盒子暗影一样
3. 背景图大小
- background-size: 宽度 高度;
-
属性值:
- 数值 +px
- 百分比
-
关键字
- cover 图片一直被拉伸, 直到充斥整个盒子, 可能会呈现背景图被裁掉
- contain 图片一直被拉伸, 直到碰到盒子某个边缘之后就进行拉伸, 可能会呈现留白
4. 背景图裁切
-
background-clip
- border-box 从边框之外裁切
- padding-box 从 padding 区域开始裁切
- content-box 从内容区域开始裁切
- 不须要去反复
5. 背景图原点
-
background-origin
- padding-box 从 padding 区域开始显示
- border-box 从边框区域开始显示
- content-box 从内容区开始显示
6. 背景图的固定
- background-attachment: scoll(滚动)/fixed(固定) 背景图固定, 内容滚动
7. 圆角
-
border-radius
- 个别设置 50%, 实现圆形
- 一个值: 周围
- 两个值: 对角
- 三个值: 左上 对角 右下
- 四个值: 顺时针
8. 响应式布局
依据不必的设施分辨率 显示不同的款式
- 长处: 适配性好, 高级
- 毛病: 工作量大, 繁琐, 实用于小网站
-
媒体查问 :
@media 设施类型 and (媒体个性){
选择器 {
款式
}
}
设施类型: all(全副)/screen(显示器)
媒体个性: max-width/min-width
-
写法留神:
- 1) and 两边必须有空格
- 2) 媒体个性前面不要加分号
- 3) 多个媒体个性之间用 and 连贯