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