css笔记2

颜色属性

线性渐变

background-image:linear-gradient()

线性渐变的基础参数：

①起始颜色和最终颜色

②方向：通过to+left/right/top/bottom来设置，需要注意的是可以不加to，但要加厂商前缀

③度数 -deg 如果角度为正,那么顺时针变化，如果角度为负，那么逆时针变化

例如：

background-image:linear-gradient(to top,red,yellow);
background-image:-webkit-linear-gradient(left,red,yellow);
background-image:linear-gradient(0deg,red,yellow);

background-image: linear-gradient(red 30%,yellow 70%);
0%-30%为纯红色，30%-70%为红色渐变为黄色，70%-100%为默认采用的最后一个颜色的纯色。

参考：详细一些

径向渐变

径向渐变就是从一个点开始向外扩展为一个圆形或者椭圆，因此，径向渐变首先需要确定一个中心点，然后是大小和形状。

background-image:radial-gradient();

背景

• 引入背景图片:

background: url(xxx.jpg)

• 背景大小

1.第一值表示宽度第二个值表示高度,如果只有一个值，那么表示宽度，高度为自适应:

background-size:1000px 100px;

2.如果背景使用百分比，背景图片的宽度和高度的百分比是从盒子的宽度和高度计算而来:

background-size: 50% 30%;

3.如果用contain，则不去管盒子是否铺满，保证必须把图片显示完整：

background-size: contain;

4.如果用cover，则不去管图片能不能显示完整，保证必须把盒子铺满：

background-size: cover;

• 背景位置

有三个属性值：padding-box（默认），border-box, content-box

background-origin: content-box;

• 背景拆切

有三个属性值：padding-box（默认），border-box, content-box

background-clip: content-box;

• 多背景设置

以逗号分隔，顺序在前，显示层级高

边框圆角

border-radius:长度/百分比

四个方向的边框圆角：

border-top-lef-riadus

border-top-right-riadus

border-bottom-right-riadus

border-bottom-left-riadus

box-shadow

• 水平阴影位置

h-shadow

• 垂直阴影位置

v-shadow

• 模糊距离

blur

• 阴影大小

spread

• 影音颜色

color

• 将外部阴影改为内部阴影

inset

增进页面效果的属性

• resize属性

语法：

resize：none | both | horizontal | vertical

取值：

none：不允许用户调整元素大小。
both：用户可以调节元素的宽度和高度。
horizontal：用户可以调节元素的宽度
vertical：用户可以调节元素的高度。

注：

设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。
如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。
对应的脚本特性为resize。

• box-sizing

语法：

box-sizing: border-box | content-box

默认是content-box,若改为border-boxz则开启了怪异模式，盒子的width就直接是整个盒子的宽度，这个宽度包括内容宽度，内边距，边界线，,外边距；盒子的height就直接是整个盒子的高度，这个高度包括内容高度，内边距，边界线,外边距。

分栏布局

• 栏目宽度

column-width

• 栏目列数

column-count

• 栏目距离

column-gap

• 栏目间隔线

column-rule

column-rule-color

column-rule-style

• 栏目横跨列数

column-span

注：栏目宽度会严重影响栏目列数，栏目宽度逐渐变宽，最后会变成一列；栏目宽度逐渐变窄，最多会等于设置的列数。

过渡效果

• 设置css参加过渡效果的属性

transition-property：none | all | 属性名称

• 过渡时间

transition-duration:-s/ms

• 过渡的速度曲线

transtition-timing-function

• 延迟

transition-delay

转载于:https://www.cnblogs.com/pallcard-LK/p/7108021.html