css样式设计 基本样式

盒子阴影

box-shadow 盒子阴影
水平方向上阴影偏移量
垂直方向上阴影偏移量
模糊的程度 （正值）
阴影的外延伸 （数值正负皆可）
阴影的颜色 inset

box-shadow: 0px 0px 10px red inset;

颜色
表示颜色的方式
颜色名，英文
RGB（Red green blue）(0-255,0-255,0-255) color:rgb(red, green, blue);
16进制 #ff0000
常用的颜色
黑色 #000
白色 #fff
红色 #f00
深灰 #222
灰色 #333
浅灰 #ccc

背景图片

url 图片的路径 相对路径绝对路径都可以

background-image: url("…/img/bdqb.jpg")

background-repeat 背景图重复的方式
默认就是repeat ， 铺满整个盒子
no-repeat 不会平铺
repeat-x 水平方向上平铺
repeat-y 垂直方向上平铺
示例：

background-repeat: no-repeat

规定背景图在盒子中的位置
属性值：像素px，百分比，单词
格式：background-position: 向右的偏移量 向下的偏移量;
1.像素 px
可以为负值 正反方向都行。
2.百分比是相对于容器本身而言的
盒子的宽/高-图片的宽/高*百分比
3.单词
水平 left center right
垂直 top bottom center
只写一个值的话，第二值默认是center
设置背景图片是否会随着网页滚动而滚动
fixed 背景是不会滚动的，是固定的
scroll 默认值 会滚动。

复合写法：

background:color,image,repeat,attachment,position

顺序可以互换。
背景尺寸

background-size

第一值为宽，第二个为高
属性值类型：
1.px
2.百分比
背景图片宽高相当于盒子的宽高百分比
3.单词
background-size: contain;自动调整缩放比例，保证图片完整显示在背景区域中，但不能保证铺满盒子。
background-size: cover;自动调整缩放比例 保证背景区域铺满图片，但不能保证图片的完整显示。

背景原点background-origin
padding-box 默认的， 从内边距开始
border-box 从边框开始
content-box 从内容开始
超过的部分，会被剪掉。
border-box 超出边框部分
content-box 超出内容部分
padding-box 超出内布局部分
background-origin 从哪里渲染背景图
border-box 从边框开始渲染背景图
content-box 从内容区域开始渲染背景图
padding-box 从内边距开始渲染背景图。

background-origin: border-box;

box-shadow 给盒子添加阴影
text-shadow 给文本添加阴影
格式：
text-shadow:水平偏移量 垂直偏移量 模糊程度 阴影颜色
指定盒子的宽高计算方式
border-box width/height 是指盒子的实际宽高
content-box width/height 是指盒子的内容宽高
content-box计算格式：
盒子的实际宽高=内容的宽高（设置的宽高）+内边距+边框
border-box计算方式：
盒子的实际宽高（设置的宽高）=内容的宽高+内边距+边框

边框圆角

border-radius

线性渐变
格式：
background-image: linear-gradient(方向，起始颜色…，终止颜色);
方向：

to left, to right/to top/to bottom

角度
45° 从左下到右上
90° 相当于 to right 从左到右
135° 从左上到右下
180° 从上到下
-135 从右上到左下
可以通过百分比设置颜色出现的区域

 background-image: linear-gradient(45deg,
      pink 0%,
      red 25%,
      blue 50%,
      yellow 75%,
      green 100%);

过渡transition

功能：实现元素不同状态之间的平滑过渡。
之前：元素->hover状态 直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。
格式：
transition：过渡的属性 完成时间（s） 运动曲线 延迟时间
数值型的属性才可以设置过渡。

width,height,color,font-size

transition-property 过渡属性：发生变化时，想要有过渡效果的属性。all，全属性。
transition-duration 完成时间：单位是s/ms。
transition-timing-function 运动曲线：
linear 匀速
ease 减速
ease-in 加速
ease-in-out 先加速后减速
transition-delay 延迟时间：单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时，也会生效。