前端基础之CSS3基础学习(一)

css3

最新的CSS标准
完全向后兼容

CSS3模块：

css3被划分为模块
重要的模块包括：

（1）选择器

（2）框模型

（3）背景和边框

（4）2D/3D转换

（5）文本效果

（6）动画

（7）多列布局

（8）用户界面

CSS3边框：

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框。
常见属性：

（1）border-radius

（2）box-shadow

（3）border-image

浏览器支持：

前端基础之CSS3基础学习(一)

css3圆角边框：

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: rgb(247, 20, 20);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

运行结果：

前端基础之CSS3基础学习(一)

CSS边框阴影：

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            border-radius: 10px;
            background-color: rgb(212, 137, 137);
            box-shadow: 14px 4px 15px black;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

运行结果：

前端基础之CSS3基础学习(一)

CSS3边框图片：

<!--在这里，图片铺满整个边框。-->
border-image:url(/i/border.png) 30 30 round;
<!--在这里，图片被拉伸以填充该区域。-->
border-image:url(/i/border.png) 30 30 stretch;

CSS3背景：

background-size
background-origin

浏览器支持：

前端基础之CSS3基础学习(一)

background-size属性：

background-size 属性规定背景图片的尺寸。
CSS3 之前，背景图片的尺寸由图片的实际尺寸决定的。
在 CSS3 中，可以规定背景图片的尺寸
这就允许我们在不同的环境中重复使用背景图片。

background-origin属性：

background-origin属性规定背景图片的定位区域。
背景图片可以放置于content-box、padding-box、或border-box区域。

CSS3文本效果：

css3包含多个新的文本特性。
常见文本属性：

(1)text-shadow

(2)word-wrap

浏览器支持：

前端基础之CSS3基础学习(一)

文本阴影效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本阴影</title>
    <style>
        p {
            font-size: 30px;
            font-weight: 700;
            text-shadow: 4px 4px 2px red;
        }
    </style>
</head>

<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>

</html>

运行结果：

前端基础之CSS3基础学习(一)

CSS3自动换行：

单词太长可能会超出某个区域：

前端基础之CSS3基础学习(一)
可以使用word-wrap 允许文本强制文本换行。

前端基础之CSS3基础学习(一)

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本阴影</title>
    <style>
        p {
            width: 120px;
            border: 1px solid black;
            word-wrap: break-word;
        }
    </style>
</head>

<body>
    <div>
        <p>这是一个段落，this is aaaaaaaaaaaaaaaaaa book</p>
    </div>
</body>

</html>

新的文本属性：

属性： --------------------- 描述：

hanging-punctuation ：规定标点字符是否位于线框之外。

punctuation-trim ：规定是否对标点字符进行修剪。

text-align-last ：设置如何对齐最后一行或紧挨着强制换行符之前的行。

text-emphasis ：向元素的文本应用重点标记以及重点标记的前景色。

text-justify ：规定当 text-align 设置为 “justify” 时所使用的对齐方法。

text-outline ：规定文本的轮廓。

text-overflow ：规定当文本溢出包含元素时发生的事情。

text-shadow ：向文本添加阴影。

text-wrap ：规定文本的换行规则。

word-break ：规定非中日韩文本的换行规则。

word-wrap ：允许对长的不可分割的单词进行分割并换行到下一行。

CSS3字体：

CSS3 @font-face 规则

当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>

CSS3 2D转换

我们能够通过CSS3转换，对元素进行移动、缩放、转动、拉长或拉伸。

浏览器支持：

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 需要前缀 -ms-。

2D转换：

translate()
rotate()
scale()
skew()
matrix()
translate()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本阴影</title>
    <style>
        .div0 {
            width: 200px;
            height: 100px;
            background-color: rgb(39, 39, 46);
        }
        
        .div1 {
            width: 200px;
            height: 100px;
            background-color: blue;
            /* translate:第一个参数沿X轴移动距离，第二个沿着Y轴移动距离 */
            transform: translate( 0 300px);
        }
    </style>
</head>

<body>
    <div class="div0"></div>
    <div class="div1">

    </div>
</body>

</html>

运行结果：

前端基础之CSS3基础学习(一)
rotate()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本阴影</title>
    <style>
        .div0 {
            width: 200px;
            height: 100px;
            background-color: rgb(39, 39, 46);
        }
        
        .div1 {
            width: 200px;
            height: 100px;
            background-color: blue;
            /*值 rotate(30deg) 把元素顺时针旋转 30 度*/
            transform: rotate(30deg);
        }
    </style>
</head>

<body>
    <div class="div0"></div>
    <div class="div1">

    </div>
</body>

</html>

运行结果：

前端基础之CSS3基础学习(一)

scale()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .div0 {
            width: 200px;
            height: 100px;
            background-color: rgb(39, 39, 46);
        }
        
        .div1 {
            width: 200px;
            height: 100px;
            background-color: blue;
            /*值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍*/
            transform: scale(2,4);
        }
    </style>
</head>

<body>
    <div class="div0"></div>
    <div class="div1">

    </div>
</body>

</html>

运行结果

前端基础之CSS3基础学习(一)

skew()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .div0 {
            width: 200px;
            height: 100px;
            background-color: rgb(39, 39, 46);
        }
        
        .div1 {
            width: 200px;
            height: 100px;
            background-color: blue;
            /* 通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数 */
            transform: skew(30deg, 20deg);
        }
    </style>
</head>

<body>
    <div class="div0"></div>
    <div class="div1">

    </div>
</body>

</html>

运行结果：

前端基础之CSS3基础学习(一)

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

新的转换属性：

transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。

2D transform方法：

函数-------------------------- 描述

matrix(n,n,n,n,n,n)：定义 2D 转换，使用六个值的矩阵。

translate(x,y) ：定义 2D 转换，沿着 X 和 Y 轴移动元素。

translateX(n) ：定义 2D 转换，沿着 X 轴移动元素。

translateY(n) ：定义 2D 转换，沿着 Y 轴移动元素。

scale(x,y) ：定义 2D 缩放转换，改变元素的宽度和高度。

scaleX(n) ：定义 2D 缩放转换，改变元素的宽度。

scaleY(n) ：定义 2D 缩放转换，改变元素的高度。

rotate(angle) ：定义 2D 旋转，在参数中规定角度。

skew(x-angle,y-angle) ：定义 2D 倾斜转换，沿着 X 和 Y 轴。

skewX(angle) ：定义 2D 倾斜转换，沿着 X 轴。

skewY(angle) ：定义 2D 倾斜转换，沿着 Y 轴。

CSS3 3D转换

rotateX()
rotateY()

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 100px;
            height: 75px;
            background-color: yellow;
            border: 1px solid black;
        }
        
        div#div2:hover {
            transition: all 3s;
            transform: rotateX(120deg);
        }
    </style>
</head>

<body>
    <div id="div2">你好。这是一个 div 元素。</div>
</body>

</html>

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 75px;
            background-color: yellow;
            border: 1px solid black;
        }
        
        div#div2:hover {
            transition: all 3s;
            transform: rotateY(120deg);
        }
    </style>
</head>

<body>
    <div id="div2">你好。这是一个 div 元素。</div>
</body>

</html>

2D Transform 方法

函数------------ 描述

matrix3d(n,n,n,n,n,n,

n,n,n,n,n,n,n,n,n,n) ：定义 3D 转换，使用 16 个值的 4x4 矩阵。

translate3d(x,y,z) ：定义 3D 转化。

translateX(x) ：定义 3D 转化，仅使用用于 X 轴的值。

translateY(y) ：定义 3D 转化，仅使用用于 Y 轴的值。

translateZ(z) ：定义 3D 转化，仅使用用于 Z 轴的值。

scale3d(x,y,z) ：定义 3D 缩放转换。

scaleX(x) ：定义 3D 缩放转换，通过给定一个 X 轴的值。

scaleY(y) ：定义 3D 缩放转换，通过给定一个 Y 轴的值。

scaleZ(z) ：定义 3D 缩放转换，通过给定一个 Z 轴的值。

rotate3d(x,y,z,angle) : 定义 3D 旋转。

rotateX(angle) : 定义沿 X 轴的 3D 旋转。

rotateY(angle) : 定义沿 Y 轴的 3D 旋转。

rotateZ(angle) : 定义沿 Z 轴的 3D 旋转。

perspective(n) : 定义 3D 转换元素的透视视图。

CSS3过渡:

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>
</body>
</html>

多项改变:

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: yellow;
            transition: width 2s, height 2s;
            -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
        }
        
        div:hover {
            width: 200px;
            height: 200px;
            transform: rotate(180deg);
        }
    </style>
</head>

<body>

    <div></div>
</body>

</html>

CSS3 3D动画

CSS3动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* background-color: blue; */
            animation: mydiv 2s linear;
        }
        
        @keyframes mydiv {
            0% {
                background-color: blueviolet;
            }
            20% {
                background-color: rgb(145, 110, 177);
            }
            40% {
                background-color: rgb(161, 105, 212);
            }
            80% {
                background-color: rgb(188, 159, 218);
            }
            100% {
                background-color: rgb(241, 240, 241);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

CSS3动画属性:

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode	规定对象动画时间之外的状态。

CSS3多列:

常用:

column-count:规定元素应该被分隔的列数。
column-gap:规定列之间的间隔。
column-rule :设置所有 column-rule-* 属性的简写属性。

CSS3用户界面:

前端基础之CSS3基础学习(一)

css3

CSS3 2D转换

CSS3 3D转换

CSS3 3D动画

继续阅读

关于:first-child的误区

flex弹性布局中的flex：1的理解

flex弹性盒模型及flex-grow与flex-shrink的计算

Flex布局及属性

深入CSS vertical-align属性

给背景图片添加超链接

去除div的滚动条但是依然可以滚动的方法

modern-normalize vs normalize.css

弹性web UI的核心：媒体查询

CSS3 ---奔跑的小人

【CSS3】设置超链接样式超链接样式

分享几个常用的css网站前言一、CSS 参考网站二、CSS 参考网站三、CSS集合，自由调节动画参数，生成代码片段：五、通过做饭，练习 CSS 选择器六、送小青蛙回家，学习 flex 布局总结

HTML CSS 的鼠标悬浮，点击的样式当鼠标悬浮时：a:hover当鼠标点击链接时：a:active

谈谈css的伪类和伪元素

十大酷炫屌的图像悬停特效

vue3 transitionvue3 transition组件和vue2 transition组件