HTML5CSS3--CSS3的各种用法

news2024/11/14 13:44:15

1.background-origin 背景图起点：

padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

2.background-clip 背景图裁剪：

border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

3.边框背景图：

border-image-source	背景图资源地址
border-image-slice	根据九宫格的（上右下左）方式裁剪尺寸
border-image-width	边框背景图的尺寸
border-image-outset	边框背景图的位置
border-image-repeat	背景背景图是否平铺

4. box-shadow 盒子阴影属性(4行)：

水平偏移量（正数向右，否则反之）上右下左

垂直的偏移量（正数向下，否则反之）上右下左

模糊度延伸值（可选）上右下左

颜色内阴影（可选 inset）上右下左

5. text-shadow 文本阴影(1行)：

水平偏移量（正数向右，否则反之）垂直的偏移量（正数向下，否则反之）模糊度颜色

6.linear-gradient 线性渐变：

   background-image: linear-gradient(
                to right,
                red,
                green
            );

效果图：

7.radial-gradient 径向渐变:

  background-image: radial-gradient(
                at center center,
                red,
                yellow,
                white,
                green
            );

效果图:

8. transform 转换属性：

translateX(0px)	位移： translateX (属性值为正数向右、向下)
translateY(0px)	位移： translateY (属性值为正数向右、向下)
translateZ(0px)	位移： translateZ (属性值为正数向右、向下)
rotate3d(0,0,0,0deg)	旋转： rotate (属性值为正数顺时针)
scale(1)	缩放： scale(倍数)
skew(0deg)	角度倾斜： skew(角度)

9.transition 过度属性：

（1） transition-property 用于规定设置过渡效果的CSS属性的名称：

none	没有属性会获得过渡效果
all	所有属性都将获得过渡效果
width	只有宽度过渡
height	只有高度过度
border-radius	圆角过渡

（2） transition-duration 用于规定设置过渡效果的时间：

.5s

0.5s内过度

（3） transition-timing-function 设置速度曲线：

`linear`	匀速
`ease`	指定以慢速开始，然后加快，最后慢慢结束的过渡效果 cubic-bezier(0.25, 0.1, 0.25, 1)
`ease-in`	指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果 cubic-bezier(0.42, 0, 1, 1)
`ease-out`	指定以慢速结束（淡出效果）的过渡效果 cubic-bezier(0, 0, 0.58, 1)
`ease-in-out`	指定以慢速开始和结束的过渡效果， cubic-bezier(0.42, 0, 0.58, 1)
cubic-bezier(n,n,n,n,)	贝塞尔曲线

贝塞尔曲线自定义网址：https://cubic-bezier.com/

（4）transition-delay 设置延长时间：

2s	过渡效果的延时时间为2s

10.动画：

animation-name	动画名称
animation-duration	动画持续的时间
animation-timing-function: linear	动画执行状态（匀速）
animation-delay	延迟执行动画
animation-iteration-count: infinite	执行动画的次数 (infinite 无限次)
animation-fill-mode	动画结束所在位置
animation-direction	执行动画的方向
animation-play-state: paused	停止执行动画