地方房产网站APP如何做,郑州网站建设品牌好,网站开发风险,呼市网站设计面试官#xff1a;CSS3新增了哪些新特性#xff1f; 一、是什么
css#xff0c;即层叠样式表#xff08;Cascading Style Sheets#xff09;的简称#xff0c;是一种标记语言#xff0c;由浏览器解释执行用来使页面变得更美观
css3是css的最新标准#xff0c;是向后兼…面试官CSS3新增了哪些新特性 一、是什么
css即层叠样式表Cascading Style Sheets的简称是一种标记语言由浏览器解释执行用来使页面变得更美观
css3是css的最新标准是向后兼容的CSS1/2 的特性在 CSS3 里都是可以使用的
而 CSS3 也增加了很多新特性为开发带来了更佳的开发体验
二、选择器
css3中新增了一些选择器主要为如下图所示 三、新样式
边框
css3新增了三个边框属性分别是 border-radius创建圆角边框 box-shadow为元素添加阴影 border-image使用图片来绘制边框
box-shadow
设置元素阴影设置属性如下
水平阴影垂直阴影模糊距离(虚实)阴影尺寸(影子大小)阴影颜色内/外阴影
其中水平阴影和垂直阴影是必须设置的
背景
新增了几个关于背景的属性分别是background-clip、background-origin、background-size和background-break
background-clip
用于确定背景画区有以下几种可能的属性
background-clip: border-box; 背景从border开始显示background-clip: padding-box; 背景从padding开始显示background-clip: content-box; 背景显content区域开始显示background-clip: no-clip; 默认属性等同于border-box
通常情况背景都是覆盖整个元素的利用这个属性可以设定背景颜色或图片的覆盖范围
background-origin
当我们设置背景图片时图片是会以左上角对齐但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的
background-origin: border-box; 从border开始计算background-positionbackground-origin: padding-box; 从padding开始计算background-positionbackground-origin: content-box; 从content开始计算background-position
默认情况是padding-box即以padding的左上角为原点
background-size
background-size属性常用来调整背景图片的大小主要用于设定图片本身。有以下可能的属性
background-size: contain; 缩小图片以适合元素维持像素长宽比background-size: cover; 扩展元素以填补元素维持像素长宽比background-size: 100px 100px; 缩小图片至指定的大小background-size: 50% 100%; 缩小图片至指定的大小百分比是相对包 含元素的尺寸
background-break
元素可以被分成几个独立的盒子如使内联元素span跨越多行background-break 属性用来控制背景怎样在这些不同的盒子中显示
background-break: continuous; 默认值。忽略盒之间的距离也就是像元素没有分成多个盒子依然是一个整体一样background-break: bounding-box; 把盒之间的距离计算在内background-break: each-box; 为每个盒子单独重绘背景
文字
word-wrap
语法word-wrap: normal|break-word
normal使用浏览器默认的换行break-all允许在单词内换行
text-overflow text-overflow设置或检索当当前行超过指定容器的边界时如何显示属性有两个值选择
clip修剪文本ellipsis显示省略符号来代表被修剪的文本
text-shadow
text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离以及阴影的颜色
text-decoration
CSS3里面开始支持对文字的更深层次的渲染具体有三个属性可供设置 text-fill-color: 设置文字内部填充颜色 text-stroke-color: 设置文字边界填充颜色 text-stroke-width: 设置文字边界宽度
颜色
css3新增了新的颜色表示方式rgba与hsla
rgba分为两部分rgb为颜色值a为透明度hala分为四部分h为色相s为饱和度l为亮度a为透明度
四、transition 过渡
transition属性可以被指定为一个或多个CSS属性的过渡效果多个属性之间用逗号进行分隔必须规定两项内容
过度效果持续时间
语法如下
transition CSS属性花费时间效果曲线(默认ease)延迟时间(默认0)上面为简写模式也可以分开写各个属性
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;五、transform 转换
transform属性允许你旋转缩放倾斜或平移给定元素
transform-origin转换元素的位置围绕那个点进行转换默认值为(x,y,z):(50%,50%,0)
使用方式
transform: translate(120px, 50%)位移transform: scale(2, 0.5)缩放transform: rotate(0.5turn)旋转transform: skew(30deg, 20deg)倾斜
六、animation 动画
动画这个平常用的也很多主要是做一个预设的动画。和一些页面交互的动画效果结果和过渡应该一样让页面不会那么生硬
animation也有很多的属性
animation-name动画名称animation-duration动画持续时间animation-timing-function动画时间函数animation-delay动画延迟时间animation-iteration-count动画执行次数可以设置为一个整数也可以设置为infinite意思是无限循环animation-direction动画执行方向animation-paly-state动画播放状态animation-fill-mode动画填充模式
七、渐变
颜色渐变是指在两个颜色之间平稳的过渡css3渐变包括
linear-gradient线性渐变 background-image: linear-gradient(direction, color-stop1, color-stop2, …); radial-gradient径向渐变 linear-gradient(0deg, red, green); 八、其他
关于css3其他的新特性还包括flex弹性布局、Grid栅格布局这两个布局在以前就已经讲过这里就不再展示
除此之外还包括多列布局、媒体查询、混合模式等等…
参考文献 https://juejin.cn/post/6844903518520901639#heading-1 https://www.w3school.com.cn/css/index.asp https://github.com/ytanck/ytanck.github.io/issues/73
