MSIPO技术圈 › 首页 ›IT技术 › 查看内容

前端之css3

2023-07-13

css3优势：

1 新增实用的选择器，例如动态伪类，目标伪类，伪元素

2 新增更好的视觉效果

3 新增丰富的背景效果

4 新增全新的布局方案

5 新增web字体

6 新增颜色，hsl，hsla，rgba

7 新增2D和3D变换

8 新增动画和过渡效果

css3 私有前缀：

作用：w3c在浏览器正式支持某个新的属性前，浏览器根据浏览器的内核，使用此前缀测试新属性，正式上线后，不需要加上此前缀

查询浏览器是否兼容：Can I use... Support tables for HTML5, CSS3, etc

谷歌，edge，safari浏览器：--webkit--

firefox浏览器：--moz--

旧opera浏览器：--o--

旧Ie浏览器：--ms--

长度单位：

rem 字体大小倍数

vw 视口的宽度

vh 视口的高度

vmax 宽度或者高度最大值的百分比值

vmin 宽度或者高度最小值的百分比值

盒子模型：

box-sizing 设置盒子模型的类型

取值：

border-box 宽高设置为盒子大小

contentent-box 宽高设置为盒子内容区域大小，默认值

resize 自己调节盒子大小

必须和overflow搭配使用

取值：

horizontal 水平方向调节

vertioal 垂直方向调节

both 两个方向都可调节

box-shadow 盒子阴影

取值：

1 水平方向垂直方向

2 水平方向垂直方向阴影颜色

3 水平方向垂直方向阴影模糊程度

4 水平方向垂直方向模糊程度阴影颜色---常用

5 水平方向垂直方向模糊程度阴影外延阴影颜色

6 水平方向垂直方向模糊程度阴影外延阴影颜色内阴影(inset)

opacity 不透明度

取值：

0-1 取值范围

0 完全透明

1 不透明

注意：修改的是整个元素的透明度

背景：

background-origin 设置背景图的原点

取值：

padding-box 默认值，按照内边距

content-box 按照内容

border-box 按照边框

background-clip 设置背景图的向外裁剪区域

取值：

border-box 默认值，按照边框

padding-box 按照内边距

content-box 按照内容

text 背景呈现在文字区域（需要添加前缀）

background-size 设置背景图大小

取值：

contain 包含

cover 等比例缩放

auto 默认值

background 复合属性：

background：颜色，url，重复，位置/大小，原点，裁剪方式；

多种背景图片设置：

 background: url("") no-repeat  left top,
                    url("") no-repeat  right top,
                    url("") no-repeat  left bottom,
                    url("") no-repeat  right top,;

边框：

border-radius 边框圆角

取值：

像素

百分比

border-top-left-radius: 10px 5px;
border-top-left-radius: 20px 2px;
border-bottom-left-radius: 10px 30px;
border-bottom-right-radius: 30px 40px;

复合属性：
border-radius: 左上角，右上角，右下角，左下角;

outline 边框外轮廓

不计入盒子大小；不占位置；

取值：

outline-width: 20px;
outline-offset: 30px;
outline-style: solid;
outline-color: red;

复合属性
 outline: width,style,color;

文本属性：

text-shadow：文本阴影

取值：

1 水平方向垂直方向模糊程度阴影颜色

2 none 默认值，无文本阴影

white-space：文本换行

取值：

pre 按照原文格式显示

pre-wrap 按照原文格式显示，超出换行

pre-line 按照原文格式显示，首尾空格不显示

nowrap 不换行

normal 超出自动换行，默认值

text-overflow：文本溢出

使用时添加overflow：hidde；

取值：

ellipsis 溢出显示省略号

text-decoration 文本修饰

修改为复合属性

-webkit-text-stroke 文本描边

仅有webkit可以使用

 -webkit-text-stroke:3px  red;

渐变属性：

线性渐变：

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

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

background-image: linear-gradient(20deg,red,yellow,green);

background-image: linear-gradient(red 50px,yellow 80px,green 100px);

径向渐变：

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

background-image: radial-gradient(at left top,red,yellow,green);

background-image: radial-gradient(circle,red,yellow,green);
        
background-image: radial-gradient(100px,red,yellow,green);
        
background-image: radial-gradient(red 30px,yellow 60px,green 90px);

重复渐变：

前提：在线性渐变或者径向渐变的基础上，在纯色区域进行重复渐变

background-image:repeating-radial-gradient(red 30px,yellow 60px,green 90px);

字体：

图标库：iconfont-阿里巴巴矢量图标库

//引入字体
@font-face {
   font-family: "ces";
   src: url("");
}

//使用：
font-family: "ces";

//阿里使用
https://www.iconfont.cn/fonts/index?spm=a313x.7781069.1998910419.16

//字体图标
   1 比图片清晰
   2 灵活性好
   3 兼容性好

变换transform：

2D变换：

语法：transform： translate（x，y）；

位移

特点：

1 参考自身位置

2 不脱离标准文档流

3 行内元素使用效果不好

4支持链式操作

5 综合写法仅仅只写一个值代表X值

取值：

translateX x轴位移

translateY y轴位移

xy取值：px，%

translate（x，y）综合写法

缩放：

特点：

1 行内元素使用效果不好，可以改成行内块使用

2 支持链式操作

3 综合写法仅仅书写一个值时，代表两个方向

取值：

scaleX() x轴缩放

scaleY() y轴缩放

scale() 综合写法

旋转：

特点：

1 使用之后，xy轴修改

取值：

rotateZ() 正值顺时针；负值逆时针

rotate() 综合写法

扭曲：

特点：

1 综合写法仅仅写一个值时，修改是x轴

取值：

skewX()

skewY()

skew(x，y)

注意：使用链式操作时，最好把旋转放到最后

transfrom-origin 修改变换的圆心位置

影响功能：缩放，旋转

取值：

关键词（只写一个值时，另一个值取中间值）

3D变换:

前提：父元素开启3D空间（transform-style:preserve-3d；)

设置景深（perspective:500px;）

透视点：

含义：父盒子的中心点

修改：

perspective-origin：30px 30px；

位移：