c3新增特性

2024-01-24 12:25:40

css3的新增特性

文字效果

① word-wrap

CSS3中，word-wrap会检索当前行超过指定容器的边界的单词并对其进行拆分。所有主流浏览器都支持 word-wrap 属性。 p { word-wrap:break-word; }

② text-overflow

text-overflow作用是规定如果当前行超过指定容器的边界时怎样显示。它与word-wrap协同工作，对于“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。

clip : 　不显示省略标记（...），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（...）

③ text-shadow

CSS3中，text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

h1{ text-shadow: 5px 5px 5px #FF0000; }

④ text-decoration

CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：

1.text-fill-color: 设置文字内部填充颜色
2.text-stroke-color: 设置文字边界填充颜色
3.text-stroke-width: 设置文字边界宽度

border边框效果

CSS3新增了三个边框属性，分别是border-radius、box-shadow和border-image。border-radius可以创建圆角边框，box-shadow可以为元素添加阴影，border-image可以使用图片来绘制边框。
IE9+支持border-radius和box-shadow属性。Firefox、Chrome以及Safari支持所有新的边框属性。

背景

CSS3新增了背景属性：

background-clip、利用这个属性可以设定背景颜色或图片的覆盖范围。
background-origin、用于确定背景的位置，它通常与background-position联合使用，可以从 border、padding、content来计算background-position（就像background-clip）
background-size用来调整背景图片的大小

渐变

CSS3新增了渐变效果，包括linear-gradient(线性渐变)和radial-gradient(径向渐变)，常与2D转换使用。

Transition,Transform和Animation

这三个特性是CSS3新增的和动画相关的特性。

Transition

Transition可以在当元素从一种样式变换为另一种样式时为元素添加效果

transition-property: 规定应用过渡的CSS属性的名称。
transition-duration: 规定完成过渡效果需要多长时间。
transition-delay: 规定过渡效果何时开始，默认是0。
transition-timing-function: 规定过渡效果的时间曲线，默认是”ease”，还有linear、ease-in、ease-out、ease-in-out和cubic-bezier等过渡类型。
transition: 简写属性，用于在一个属性中设置四个过渡属性。

Transform

Transform用来向元素应用各种2D和3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜等操作。
translate(x,y): 定义2D位移转换。
scale(x,y): 定义2D缩放转换。
rotate(angle): 定义2D旋转，在参数中规定角度。
skew(x-angle,y-angle): 定义沿着X和Y轴的2D倾斜转换。
translate3d(x,y,z): 定义3D位移转换。
scale3d(x,y,z): 定义3D缩放转换。
rotate3d(x,y,z,angle): 定义3D旋转。

Animation

animation制作动画效果需要两步，首先用关键帧声明动画，再用animation调用动画关键帧的语法是以@keyframes开头，后面紧跟着动画名称animation-name。

@keyframes test{
    100%{background-color: black;}
    60%{background-color: lightgray;}
    30%{background-color: lightgreen;}
    0%{background-color: lightblue;}
}
div{
    width: 300px;
    height: 100px;
    background-color: pink;
    animation-name: test;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
复制代码

媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
复制代码

字体图标

font-face，引入字体图标，在开发中我们经常会使用各种图标，为了节省资源，你可能不会自己设计自己需要的图标，这时候你可已通过字体图标网站获取。

弹性布局flex

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

flex-direction决定主轴的方向（即项目的排列方向）。
flex-wrap定义如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

盒子模型box-sizing

box-sizing:borderbox它的作用是添加后设置padding和border不会撑大盒子，就是说，元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

码农公寓