【前端知识之CSS】CSS3新增特性

饭啊饭°

已于 2022-07-18 09:35:59 修改

阅读量1.6k

点赞数

分类专栏：前端知识之html+CSS 文章标签：前端 css3 面试

于 2022-05-12 22:54:43 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/124740203

版权

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍CSS3新增特性。

文章目录

前言
一、选择器
二、新样式
三、transition过渡（一般和:hover搭配使用）
四、transform转换
五、animation动画
六、颜色渐变
七、弹性布局+网络布局

一、选择器

css3中新增了一些选择器
在这里插入图片描述

二、新样式

1、边框

border-radius：创建圆角边框；
box-shadow：添加阴影；
border-image：使用图片绘制边框

2、背景

background-clip：确定背景画区；
background-origin：当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的；
background-size：用来调整背景图片的大小；
background-break：元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。

3、文字

word-wrap：normal：使用浏览器默认的换行；break-all：允许在单词内换行。
text-overflow：当文本超过盒子大小时，是修建文本，还是省略号表示。
text-shadow：设置文本阴影。

4、颜色

rgba：颜色和透明度；
hala：色相+饱和度+亮度+透明度。

三、transition过渡（一般和:hover搭配使用）

在这里插入图片描述

<head>
	<style>
        .box {
     
            width: 200px;
            height: 100px;
            background-color

最低0.47元/天解锁文章

饭啊饭°

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
【前端知识之CSS】CSS3新增特性

本系列主要整理前端面试中需要掌握的知识点。本节介绍CSS3新增特性。
复制链接

扫一扫

专栏目录