CSS3知识

最新推荐文章于 2024-06-14 09:24:52 发布
最新推荐文章于 2024-06-14 09:24:52 发布
阅读量156 收藏
点赞数
分类专栏： CSS3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/slom_fxt/article/details/120420658
版权

一、CSS3是什么？

CSS3 是最新的 CSS 标准。

二、与之前的区别

与之前的css操作方法相同，新增了一些属性设置。CSS3 已完全向后兼容。

下面都是css3中新增的内容:

选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面

三、css圆角 

border-radius 属性设置元素的4角为圆角

如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值： 四个圆角值相同

border-top-left-radius

定义了左上角的弧度

border-top-right-radius

定义了右上角的弧度

border-bottom-right-radius

定义了右下角的弧度

border-bottom-left-radius

定义了左下角的弧度

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS圆角</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color:aqua;
                /*border-radius: 20px;设置一个值时四角变换*/
                /*border-radius: 20px 40px;设置两个值时，第一个是左上右下，第二个是右上左下*/
                /*border-radius: 10px 30px 50px;三个值是第一个是左上，第二个是右上左下，第三个是右下*/
                border-top-left-radius: 20px;
            }
        </style>
    </head>
    <body>
        <h4>border-radius 属性设置元素的4角为圆角</h4>
        <div></div>
    </body>
</html>

 四、CSS盒子阴影

之前学习的text-shadow:水平 垂直 模糊 颜色----设置文字阴影

box-shadow:水平 垂直 模糊 颜色---属性被用来添加阴影

 例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS盒子阴影</title>
        <style>
            p{
                font-size: 30px;
                text-shadow:5px -3px 4px red;
            }
           div{
               width: 200px;
               height: 200px;
               background-color:blue;
               box-shadow: 8px 10px 15px gold;
           }
        </style>
    </head>
    <body>
        <h2>
            之前学习的text-shadow:水平 垂直 模糊 颜色----设置文字阴影<br>
            box-shadow:水平 垂直 模糊 颜色---属性被用来添加阴影<br>
         </h2>
         <p>测试文字阴影</p><br>
         <div>测试盒子阴影</div>
    </body>
</html>

 五、CSS background-clip属性

background-clip属性指定背景绘制区域。border-box|padding-box|content-box;

 例如;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>background-cilp属性</title>
        <style>
            h3{
                width: 200px;
                height: 200px;
                padding: 30px;
                background-color: greenyellow;
                border: 10px dotted red;
                /*background-clip: border-box;默认包含边框区域*/
                /*background-clip: padding-box;*/
                background-clip: content-box;
            }
        </style>
    </head>
    <body>
      <h4>
        background-clip属性指定背景绘制区域。border-box|padding-box|content-box;<br>
        border-box---包括边框<br>
        padding-box---包括内边距，不包括边框<br>
        content-box---包括内容，不包括边框，不包括内边距<br>
      </h4>
        <h3>测试background-clip属性</h3>
    </body>
</html>

 六、CSS渐变（Gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

 background-image: linear-gradient(方向, 颜色1,颜色2, ......);

方向--to right【从左向右】  to left【从右向左】  ......

     to  bottom right .......

径向渐变（Radial Gradients）- 由它们的中心定义

background-image:radial-gradient( 中心点【不用写默认中心】，颜色1,颜色2, ......);

 例如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS渐变</title>
        <style>
          #div1{
            width: 200px;
            height: 200px;
            background-image: linear-gradient(to top right, red,green,yellow);
          }

          #div2{
            width: 200px;
            height: 200px;
            border-radius: 60px;
           background-image: radial-gradient(red,orange,green,blue,violet,indigo);
          }

        </style>
    </head>
    <body>
      <div id="div1"></div><br>

      <div id="div2"></div>
    </body>
</html>

七、CSS过渡

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

要实现这一点，必须规定两项内容：

1、指定要添加效果的CSS属性

2、指定效果的持续时间。

语法格式: transition: css属性样式  持续时间【秒】

 例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS过渡</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: greenyellow;
                transition: width 5s, height 5s,background-color 5s;
            }
            div:hover{
                width: 300px;
                height: 300px;
                background-color: hotpink;
            }
        </style>
    </head>
    <body>
      <h4>
         CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。<br>
        要实现这一点，必须规定两项内容：<br>
        1、指定要添加效果的CSS属性<br>
        2、指定效果的持续时间。<br>
        语法格式: transition: css属性样式  持续时间【秒】<br> 
      </h4>
      <div>
          测试过渡
      </div>
    </body>
</html>

 八、CSS动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

第一步:自定义动画规则

例如:

@keyframes myfirst {

from {background: red;}

to {background: yellow;}

}

@keyframes-----自定义动画的关键字

Myfirst ---- 动画名称

{}---动画规则描述

from ---  动画开始

to  ----  动画结束

第二步:在指定的元素作用自己的动画

animation:动画名称  动画持续时长;

//-webkit-animation：xxxxxx [-webkit-  GOOGLE浏览器内核]

//-ms-animation： xxxxx  [-ms-  IE浏览器内核]

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS动画</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: hotpink;
                /*在div上显示设置的动画*/
                animation: donghua1 5s;
            }
            /*自定义动画*/
            @keyframes donghua1{
                from{width: 100px;height: 100px;background-color: hotpink;}
                to{
                   width: 200px;
                   height: 200px;
                   background-color: aqua; 
                }
            }
        </style>
    </head>
    <body>
      <h4>
        CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。<br>
        第一步:自定义动画规则<br>
        例如:<br>
        @keyframes myfirst { <br>
        from {background: red;} <br>
            to {background: yellow;} <br>
            } <br>
            @keyframes-----自定义动画的关键字<br>
            Myfirst ---- 动画名称<br>
            {}---动画规则描述<br>
            from ---  动画开始<br>
            to  ----  动画结束<br>
            第二步:在指定的元素作用自己的动画<br>
            animation:动画名称  动画持续时长;<br>
            //-webkit-animation：xxxxxx [-webkit-  GOOGLE浏览器内核]<br>
            //-ms-animation： xxxxx  [-ms-  IE浏览器内核]<br>
      </h4>
      <div>
          测试建立动画
      </div>
    
    </body>
</html>

 九、CSS 2D转换

CSS3 2D转换可以对元素进行移动、缩放、转动、拉长或拉伸。

translate()--根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

translate(0px,0px);

rotate()--在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

transform:rotate(90deg);

scale()--该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

transform: scale(2,3) (正整数由大到小，小数由小到大)

skew()---该元素在X轴和Y轴上倾斜

transform:skew(30deg,20deg);

matrix()--将上面2D变换方法合并成一个，同时实现平移，旋转，缩放，倾斜

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS 2D转换</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: aqua;
                animation: donghua4 5s;
            }
            @keyframes donghua1{
                from{transform: translate(0,0);}
                to{transform:  translate(20px,30px);}
            }
            @keyframes donghua2{
                from{transform:rotate(0deg);}
                to{transform: rotate(-90deg);}
            }
            @keyframes donghua3 {
                from{transform: scale(0.2,0.3);}
            }
            @keyframes donghua4 {
                from{transform: skew(0deg,0deg);}
                to{transform: skew(20deg,30deg);}
            }
         
          

        </style>
    </head>
    <body>
        <h4>
            CSS3 2D转换可以对元素进行移动、缩放、转动、拉长或拉伸。<br>
            translate()--根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。<br>
            translate(0px,0px);<br>
            rotate()--在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。<br>
            transform:rotate(90deg);<br>
            scale()--该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：(正整数缩放，小数放大)<br>
            transform: scale(2,3)<br>
            skew()---该元素在X轴和Y轴上倾斜<br>
            transform:skew(30deg,20deg);<br>
            matrix()--将上面2D变换方法合并成一个，同时实现平移，旋转，缩放，倾斜<br>
            matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。<br>  
        </h4>
        <div>
            测试2D转换
        </div>
    </body>
</html>

十、CSS 3D转换

rotateX()--围绕其在一个给定度数X轴旋转的元素。

transform:rotateX(130deg);

rotateY()--围绕其在一个给定度数Y轴旋转的元素。

transform:rotateY(130deg);

 例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS 3D转换</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: aqua;
                animation: donghua2 5s;
            }
            @keyframes donghua1{
               from{transform: rotateX(0deg);}
               to{transform: rotateX(180deg);}
            }
            @keyframes donghua2{
                from{transform:rotateY(0deg);}
                to{transform: rotateY(180deg);}
           
         
          

        </style>
    </head>
    <body>
        <h4>
            rotateX()--围绕其在一个给定度数X轴旋转的元素。<br>
            rotateY()--围绕其在一个给定度数Y轴旋转的元素。<br>
        </h4>
        <div>
            测试3D转换
        </div>
    </body>
</html>

十一、css3 多媒体查询 

CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

viewport(视窗) 的宽度与高度

设备的宽度与高度

朝向 (智能手机横屏，竖屏) 。

分辨率

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

多媒体查询语法

@media  not|only  mediatype and (expressions) { CSS 代码...; }

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

only: 用来定某种特别的媒体类型。比如 @media only  print（只允许打印设备）。

mediatype 多媒体类型

all

用于所有多媒体类型设备

print

用于打印机

screen

用于电脑屏幕，平板，智能手机等。

speech

用于屏幕阅读器

expressions---表达式  例如:(max-width: 480px)  小于480像素

{ CSS 代码...; }-----具体样式设置

 例如:如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3 多媒体查询</title>
        <style>
            h4{
                background-color: aqua;
                font-size: 30px;
            }
            @media screen and (max-width:580px) {
               h4{
                background-color: red;
                font-size: 10px;
               }
            }
        </style>
    </head>
    <body>
        <h4>
            @media  not|only  mediatype and (expressions) { CSS 代码...; }<br>
            not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。<br>
            only: 用来定某种特别的媒体类型。比如 @media only  print（只允许打印设备）。<br>
            mediatype 多媒体类型<br>
            all 用于所有多媒体类型设备<br>
            print   用于打印机<br>
            screen  用于电脑屏幕，平板，智能手机等。<br>
            speech  用于屏幕阅读器<br>
            expressions---表达式  例如:(max-width: 480px)  小于580像素<br>
            { CSS 代码...; }-----具体样式设置<br>
        </h4>
        <div>
           
        </div>
    </body>
</html>

 

slom_fxt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 是最新的 CSS 标准
weixin_33863087的博客
09-18 470
CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。一些最重要CSS3模块如下：选择器盒模型背景和边框文字特效2D/3D转换动画多列布局http:/ /www.iis7.com/b/wzjk/用户界面：css3边框：border-radius：属性被用于创建圆角box-shadow：属性被用来添加阴影(1.位置左右 2.位...
Slurm基本使用
m0_51627713的博客
08-08 1470
系统使用Slurm作业管理系统，采用共享模式。为避免系统资源浪费，使用时请尽量保证满核提交（即为单节点核数的整数倍），不要在登录节点直接运行计算程序。
SLURM 系统入门使用指南
热门推荐
qq_33275276的博客
03-23 1万+
简介 SLURM （Simple Linux Utility for Resource Management） 一种可用于大型计算节点集群的高度可伸缩和容错的集群管理器和作业调度系统 常用命令 sacct：查看历史作业信息 salloc：分配资源 sbatch：提交批处理作业 scancel：取消作业 scontrol：系统控制 sinfo：查看节点与分区状态 squeue：查看队列状态 s...
浏览器表标准符合性测试实践
Criss@陈磊
01-11 1272
1.现状分析 　　目前，浏览器市场60%以上的份额仍然被国外浏览器占据，随着国家相关部委对国产软件发展的大力支持，以及国内浏览器核心技术的日益发展，这种情况将逐渐好转。本文基于某“核高基”重大专项课题中对浏览器的测试要求，介绍了浏览器性能测试的测试指标和评测方法，期望通过测试促进国产浏览器的性能优化，提高其整体质量，获得市场主动权。 2.测试依据 　　本文基于某核高基重大专项课题
css3.0 是什么,css3.0
weixin_35834687的博客
08-03 415
css3.0相比css2.0多了些我们经常需要使用的标签属性，例如：圆角，个别圆角，不透明度，阴影特效等1、圆角(即如何画圆)border-radiusa{width:20px;height:20px;background:red;border-radius:20px;}注：其实就是定义一个矩形，将圆的 半径和矩形的宽定义为同一个值，即得出圆。2、个别圆角(对矩形倒圆角)border-radius...
CSS3知识点总结
越努力，越幸运！
05-13 7386
CSS3知识点总结
HTML5、CSS3知识总结思维导图——B站狂神说
http____的博客
11-30 965
HTML5 CSS3
HTML5和CSS3知识结构汇总
前端精髓
06-22 1275
HTML5和CSS3知识大全
CSS3:CSS3 知识点提炼整理
05-08
CSS3核心知识点 CSS 选择器 背景 & 颜色 & 边框 字体 & 描边 & 倒影 动画 transform & transition & keyframes @media 媒体查询 flex 弹性盒 width: 50}, CSS进阶顺序 基础 能还原设计稿、兼容各种主流浏览器 盒子...
CSS3知识点归纳
07-26
自己整理的，如有不好，多多包含
CSS3知识体系图.xml
08-17
CSS知识体系图
CSS3知识体系思维导图（手工整理）
10-16
CSS3知识体系梳理思维导图，构建CSS3知识树，来让自己对CSS3的知识体系有更清晰的认知。
HTML5+CSS3知识讲解
08-04
HTML5+CSS3知识讲解,自己总结的 希望可以帮助到大家~！
CSS3 简介
lly202406的博客
06-14 312
CSS3，即层叠样式表的第三代，是网页设计和开发中不可或缺的技术之一。它为HTML元素提供了更加丰富和灵活的样式定义，使得网页不仅结构清晰，而且外观精美、交互性强。CSS3继承了CSS2的基本特性，并引入了许多新的特性和功能，极大地提高了网页设计的效率和效果。
动画的js动画于css3区别？
tianxianghuiwei的博客
06-14 207
总体来说，选择CSS3动画还是JavaScript动画取决于你的具体需求和项目的情况。对于简单的动画效果，推荐使用CSS3动画以获得更好的性能和简便性；而对于复杂的动画逻辑或需要更精细控制的情况，则使用JavaScript动画可能更合适。所有用户在使用是要根据需求进行选择，希望可以帮到大家。
HTML5+CSS3+JS小实例：网格图库
艾恩小灰灰的博客
06-05 1526
实例：网格图库。技术栈：HTML+CSS+JS。
js轮播图有，移入移出事件，左右滑动事件功能
最新发布
tianxianghuiwei的博客
06-14 155
具体的轮播可以根据需求进行调整；
背景渐变动画登录页
南北极之间
06-11 147
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
css3新增伪元素有哪些？
tianxianghuiwei的博客
06-13 245
这些伪元素允许开发者通过 CSS 控制页面上特定部分的样式和内容，例如添加装饰性内容或改变选中文本的样式。使用伪元素可以增强页面的视觉效果和交互性。CSS3 中引入了一些新的伪元素，用于向文档添加特定样式或内容。
html5css知识点
08-23
- *1* *2* *3* [HTML5CSS3知识点总结（一）](https://blog.csdn.net/qq_63778549/article/details/122047919)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值