当前位置： 七九推 > IT编程>网页制作>CSS > CSS3有哪些新特性？

CSS3有哪些新特性？

2023年03月11日 • CSS •我要评论
css3把很多以前用图片或脚本实现的效果、甚至动画效果，只需短短的几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡，动

css3把很多以前用图片或脚本实现的效果、甚至动画效果，只需短短的几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡，动画等。
CSS3最重要的模块包括：

  1. 选择器
  2. 框模型
  3. 背景和边框
  4. 文本效果
  5. 2D/3D 转换
  6. 动画
  7. 多列布局
  8. 用户界面

css3都有哪些强大的功能呢？
1、强大的选择器
2、圆角效果
3、块阴影和文字阴影
4、色彩：CSS3支持更多的颜色和更广泛的颜色定义
5、渐变效果
6、个性化字体：@Font-Face
7、多背景图
8、边框背景图
9、变形处理：可以对HTML元素进行旋转、缩放、倾斜、移动以及动画
10、多栏布局
11、媒体查询：不同屏幕分辨率，应用不同的样式

css3边框 圆角效果 border-radius

border-radius：5px 4px 3px 2px;/*四个值分别代表左上角，右上角，右下角，左下角，顺时针*/

例子：实心上半圆和实心圆


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .circle{
            height: 100px;
            width:100px;
            background: #9da;
            border-radius: 50px;/*四个圆角值都设置为宽度或高度值的一半*/
        }

        .semi-circle{
            height: 50px;
            width:100px;
            background: #9da;
            border-radius: 50px 50px 0 0;/*左上角，右上角的半径至少设置为height值*/
        }
    </style>
</head>
<body>
    <div class="circle"></div>
    <div class="semi-circle"></div>
</body>
</html>

css3边框 阴影 box-shadow

box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
值描述
X轴偏移量必需。水平阴影的位置，允许负值。
Y轴偏移量必需。垂直阴影的位置，允许负值。
阴影模糊半径可选。模糊距离，其值只能是正值，如果值为0，表示阴影没有模糊效果。
阴影扩展半径可选。阴影的尺寸。
阴影颜色可选。阴影的颜色。省略默认会黑色。
投影方式可选。设置为inset时为内部阴影方式，若省略为外阴影方式

为元素设置外阴影：

.box-shadow{
box-shadow:4px 2px 6px #333333;
}

为元素设置内阴影：

.box-shadow{
box-shadow:4px 2px 6px #333333 inset;
}

为元素添加多个阴影(只需用逗号隔开即可)：

.box-shadow{
box-shadow:4px 2px 6px #f00,-4px -2px px #000,0px 0px 12px 5px #33cc00 inset;
}

css3边框 背景图 border-image

想象一下：一个矩形，有四个边框。如果应用了边框图片，图片该怎么分布呢？图片会自动被切割分成四个等分，用于四个边框。
可以把border-image理解为就是一个切片工具，会自动把用做边框的图片切割。

border-image：border-image-source [border-image-slice] [border-image-width] [border-image-outset] [border-image-repeat];
值描述
border-image-source用在边框的图片的路径。
border-image-slice图片边框向内偏移。
border-image-width图片边框的宽度。
border-image-outset边框图像区域超出边框的量。
border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
border-image:url(border.png) 70 70 70 70 repeat;

css3颜色 颜色之RGBA

color:rgba(R,G,B,A)

以上R,G,B三个参数，正整数的取值范围为：0-255。百分数值的取值范围为0.0%-100%。
A为透明度参数，取值在0-1之间，不可为负值。

background-color:rgba(255,255,255,0.5);/*透明度为0.5的白色*/

css3颜色 渐变色彩

liner-gradient(to bottom,#fff,#999)/*liner-gradient为渐变类型-线性渐变，径向为radial，to bottom渐变方向，后面两个参数表示颜色的起始点和结束点，可以有两至多值*/

第一个参数为渐变方向，可以用角度的关键词或英文来表示：

角度英文作用
0degto top从下向上
90degto right从左向右
180degto bottom从上向下
270degto left从右向左
to top left从右下角到左上角
to top right从左下角到右上角

第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

background-image:liner-gradient(to left,red,orange,yellow,green,blue,indigo,violet);

CSS3文字与字体 text-overflow与word-wrap

text-overflow用来设置是否使用一个省略标记(……)表示对象内文本的溢出。

text-overflow:clip(表示剪切) | ellipsis(表示显示省略标记);

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须其他条件：

  1. 定义强制文本在一行显示（white-space:nowrap）
  2. 溢出内容为隐藏（overflow:hidden）
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

word-wrap用来设置文本行为，当前行超过指定容器的边界时是否断开转行

word-wrap:normal |break-word;

CSS3文字与字体 @font-face

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

@font-face{
    font-family:"字体名称"；
    src:url("字体文件在服务器上的相对或绝对路径")；
}

这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。比如：

p{
    font-size:12px;
    font-family:"my font";/*必须项，设置@font-face中font-family同样的值*/
}

CSS3文字与字体 text-shadow

text-shadow用来设置文本的阴影效果。

text-shadow:X-offset Y-offset blur color;
值描述
X-offset阴影的水平偏移距离，正值向右偏移，负值向左偏移；
Y-offset阴影的垂直偏移距离，正值向下偏移，负值向上偏移；
blur阴影的模糊程度，不能是负值，值越大越模糊；
color阴影的颜色；
text-shadow:0 1px 1px #fff;

CSS3背景 background-origin

background-origin设置元素背景图片的原始起始位置。

background-origin:border-box |padding-box|content-box;
值描述
border-box表示背景图片是从边框开始显示
padding-box表示背景图片是从内边距（默认值）开始显示
content-box表示背景图片是从内容区域开始显示

效果图如下：
这里写图片描述
需要注意的是，background-origin属性只有在背景设置为no-repeat的情况下起作用，如果背景不是no-repeat，该属性无效，会从边框开始显示。

CSS3背景 background-clip

background-clip用来将背景图片做适当的剪裁以适应实际需要。

background-clip：border-box | padding-box | content-box |no-clip;
值描述
border-box表示从边框向外剪裁背景
padding-box表示从内边距向外剪裁背景
content-box表示从内容区域向外剪裁背景
no-clip表示不剪裁，和参数border-box显示同样的效果

剪裁效果如下：
这里写图片描述

CSS3背景 background-size

background-size设置背景图片的大小，以长度或百分比显示，还可以通过cover和contain来对图片进行伸缩。

  background-size:auto|<长度值>|<百分比>|cover|contain
值描述
auto默认值，不改变背景图片的原始高度和宽度
<长度值>成对出现，设置了背景的宽高，如果就一个值，将其作为图片的宽度值来等比缩放
<百分比>成对出现，背景的宽高乘以设置的百分比得出的数即为当前宽高，如果就一个值，作为宽度值来等比缩放
cover覆盖，将图片等比缩放以填满整个容器
contain容纳，将图片等比缩放至某一边紧贴容器边缘为止

CSS3变形–旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。
角度值为正值，顺时针旋转
角度值为负值，逆时针旋转

.wrapper{
width: 200px;
    height: 200px;
    border:1px dotted red;
    margin:100px auto;
}

.wrapper div{
    width: 200px;
    height: 200px;
    background: orange;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}
 <div class="wrapper">
        <div></div>
 </div>

CSS3变形–扭曲 sknew()

CSS3变形–缩放 scale()

scale()函数让元素根据中心原点对对象进行缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放
scaleX(x)
scaleY(y)

.wrapper{
width: 200px;
    height: 200px;
    border:1px dashed red;
    margin:100px auto;
}

.wrapper div{
    width: 200px;
    height: 200px;
    line-height:200px;
    background: orange;
    text-align:center;
    color:#fff; 
}
.wrapper div:hover{
    opacity:.5;
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    transform:scale(1.5);
}
 <div class="wrapper">
        <div>我将放大1.5倍/div>
 </div>

CSS3多列布局 Columns

它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。

columns：<column-width> || <column-count>
值描述
column-width主要用来定义多列中每列的宽度
column-count主要用来定义多列中的列数

举例：要显示2栏显示，每栏宽度为200px，代码为：

columns: 200px 2;

需要注意的是，目前所有主流浏览器其该属性都支持，只是仍需加浏览器私有前缀，如-moz,-webkit,-ms,-o等。

CSS3多列布局 column-width

column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示 ；

column-width: auto | <length>
值描述
auto如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。
length使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。
-webkit-column-width:200px;
  -moz-column-width:200px;
  -o-column-width:200px;
  -ms-column-width:200px;
  column-width:200px;

CSS3多列布局 column-count

column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则：

column-count：auto | <integer>
值描述
auto此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。
integer此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。
-webkit-column-count:4;
  -moz-column-count:4;
  -o-column-count:4;
  -ms-column-count:4;
  column-count:4;

CSS3 列间距 column-gap

column-gap主要用来设置列与列之间的间距，其语法规则如下：

column-gap: normal || <length>
值描述
normal默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。
length此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。

例如：将内容分三列显列，列与列之间的间距为2em，实现代码为：

column-count: 3;
column-gap: 2em;

CSS3 列边框 column-rule

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
值描述
column-rule-width类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。
column-rule-style类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
column-rule-color类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色)
column-rule: 2px dotted green;

CSS3 跨列设置 column-span

column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。

column-span: none | all
值描述
none此值为column-span的默认值，表示不跨越任何列。
all这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。

例如：将第一个标题跨越所有列，代码：

column-span:all;

CSS3 盒子模型 box-sizing

在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下：

box-sizing: content-box | border-box | inherit
值描述
content-box默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height
border-box重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。根据传统IE盒模型可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）
inherit使元素继承父元素的盒模型模式

CSS3 伸缩布局(弹性盒布局) Flexbox

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 讲的非常棒

赞 (0)
打赏 微信扫一扫 微信扫一扫

相关文章:

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

发表评论

验证码：
最近更新的文章
推荐阅读
大家感兴趣的文章
Copyright © 2017-2023  七九推 保留所有权利. 粤ICP备17035492号
站长QQ:2386932994 | 联系邮箱：2386932994@qq.com