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

最新推荐文章于 2022-11-25 17:57:51 发布
最新推荐文章于 2022-11-25 17:57:51 发布
阅读量345 收藏 1
点赞数 3
分类专栏： HTML+CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiuqiudongdong/article/details/109165952
版权

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圆角边框：

<!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>

运行结果：

在这里插入图片描述
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边框图片：

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

CSS3背景：

  1. background-size
  2. background-origin

浏览器支持：

在这里插入图片描述
background-size属性：

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

background-origin属性：

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

CSS3文本效果：

  • css3包含多个新的文本特性。
  • 常见文本属性：
    (1)text-shadow
    (2)word-wrap

浏览器支持：

在这里插入图片描述
文本阴影效果：

<!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自动换行：

  • 单词太长可能会超出某个区域：
    在这里插入图片描述
  • 可以使用word-wrap 允许文本强制文本换行。

在这里插入图片描述
代码如下：

<!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转换，对元素进行移动、缩放、转动、拉长或拉伸。

浏览器支持：

  1. Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

  2. Chrome 和 Safari 需要前缀 -webkit-。

  3. 注释：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>
  • 运行结果：
    在这里插入图片描述
  • 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>

运行结果：

在这里插入图片描述
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>
  • 运行结果

在这里插入图片描述

  • 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>
  • 运行结果：

在这里插入图片描述

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多列:

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

CSS3用户界面:

葡萄籽啊
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3基础知识
weixin_72553821的博客
08-03 342
css基础知识
前端基础——CSS3基础
qq_41721660的博客
04-11 397
1. 渐变背景 提出： 比较规则的渐变背景可以采用切片的方式，切1px渐变背景图片然后进行平铺，而不规则的渐变只能引入整张图片，可拓展新比较低，还会影响网页的加载速度。 因此CSS3提出渐变背景background-image的属性，包括线性渐变和径向渐变 线性渐变 概念：渐变的颜色过度是沿着一条直线进行渐变 语法：background-image: linear-gradient(to 方向,颜色1 位置1，颜色2 未知2 ,...) <style> .box1{
前端开发人员必须熟悉的10个CSS3属性
01-05 531
前端开发人员必须熟悉的10个CSS3属性2011-01-05 09:30 | 957次阅读 | 来源：我想网 【已有4条评论】发表评论关键词：CSS3,HTML,开发人 | 作者：seasun | 收藏这篇资讯导读：随着Css3和html5的风靡，越来越多的前端人员开始学习Css3，今天的文章就是来说说前端应该掌握10个Css3属性。对于Css3的新属性，你又了解多少呢？虽然大多数的css3属性在很多流行的浏览器中不支持，但是我们鼓励在前端开发中要学会并且运行这些css3属性，因为这是未来的趋势。关键是首先
前端-css3，基础知识学习
tl110110tl的专栏
04-23 138
css3基础知识学习
[前端基础] CSS3 篇
不定期更新 Web 开发及机器学习相关博客
11-03 1692
CSS3 使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。CSS3 作为 CSS 的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。CSS3 的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持 CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
前端基础的学习html+css.zip
01-05
前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css 前端基础的学习html+css前端基础的学习html+css前端基础的学习html+css...
前端基础,CSS学习思维导图
最新发布
04-11
前端基础,CSS学习思维导图
前端基础css第一天,对应博客
04-03
本文将根据提供的“前端基础css第一天”学习资料，深入探讨第一天学习中涉及的重要CSS知识点，帮助初学者建立扎实的基础。 首先，我们来了解CSS的基本概念。CSS通过分离文档的内容与表现，使得网页设计更加灵活和...
HTML5前端开发之CSS基础源码
03-17
综上所述，"HTML5前端开发之CSS基础源码"涵盖了CSS的基本概念、语法、布局、样式控制以及性能优化等多个方面，是学习和实践HTML5前端开发的重要参考资料。通过深入理解和掌握这些知识点，开发者能够构建出美观且功能...
CSS3学习（一）
数据攻城狮的博客
11-14 390
文章目录CSS3 边框CSS3 圆角CSS3 盒阴影CSS3 边界图片CSS3 圆角CSS3 背景CSS3 渐变 CSS3 边框 用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。 CSS3 圆角 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html学习</title> <st
前端CSS3
qq_47840823的博客
09-29 171
1.如何学习CSS 1.定义 Cascading Style Sheet 层叠级联样式表 CSS选择器（重点） 美化网页（文字，阴影，超链接，列表，渐变…） 盒子模型 浮动 定位 网页动画（特效）   2.发展史 CSS1.0 CSS2.0：DIV（块）+ CSS，提出了HTML与CSS分离的思想，网页变得简单，立于SEO（搜索引擎优化） CSS2.1：浮动，定位 CSS3.0：圆角边框，阴影，动画…，浏览器兼容性   3.快速入门 style可以编写CSS代码 语法： &nbsp
web前端之CSS3
hu0708的博客
08-03 956
css3
前端开发技能之CSS3
xiaoqingpang的博客
11-14 320
css3新特性： border-radius:6px(圆角)； box-shadow:10px 10px 5px 1px #888;(水平阴影，垂直阴影，模糊距离，阴影尺寸，阴影颜色) text-shadow:10px 10px 10px #888;(水平阴影位置，垂直阴影位置，模糊距离，阴影颜色) rgba(0,0,0,0.6)背景色，比opacity:0.6,IE:filter:alp...
CSS3（前端案例）
weixin_55765992的博客
07-31 152
css3新特性 （文章转载自乐字节） 圆角 使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。 border-top-left-radius:10px; border-top-right-radius:6px; border-bottom-left-radius:8px; border-bottom-right-radius:12px border-radius:10px 6px 8px 12px; border-radius:10px 6px 8px; border-r
前端入门之CSS3
春眠不觉晓喵喵
11-25 301
CSS3基础
前端学习-Css3动画入门
qq_39936163的博客
03-25 670
前端学习之Css3动画Css3动画 Css3动画 在Css3中，用 @keyframes 规则来定义动画的。 可以看到，在IE10以前的版本是不兼容Css3动画的，而且特定的浏览器需要使用特定的前缀来让浏览器支持动画效果。所以使用Css3动画需要考虑一下浏览器兼容的问题。 下面是一个动画定义的例子。 @keyframes circle { 0%{ transform: rotate(0de...
前端HTML和css3学习总结及回顾
qq_43652793的博客
08-14 641
页面布局分析 p: 段落 ol: 有序列表 ul: 无序 li: 列表项 dd: 标题 dt: 列表内容 dl: 自定义列表 dl: 自定义列表 br: 换行 h1~h6: 内容标题 form: 表单 div: 盒子模型 table: 表格 tr: 行 th/td: 单元格 a: 超链接 img: 图片 video...
前端学习之CSS3新特性
Jane_xxxxxy的博客
07-30 220
1、CSS3 的现状 新增的CSS3特性有兼容性问题，ie9+才支持 移动端支持优于 PC 端 不断改进中 应用相对广泛 现阶段主要学习：新增选择器和盒子模型以及其他特性 2、CSS3 新增选择器 CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 属性选择器 结构伪类选择器 伪元素选择器 2.1 属性选择器 属性选择器，按照字面意思，都是根据标签中的属性来选择元素 属性选择器，按照字面意思，都是根据标签中的属性来选择元素 属性选择器可以根据元素特定属性的来选择元素。 这样就

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值