四、CSS3新增

最新推荐文章于 2023-04-13 15:29:59 发布
最新推荐文章于 2023-04-13 15:29:59 发布
阅读量170 收藏
点赞数
分类专栏： CSS 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49576031/article/details/120421484
版权

1.CSS3是什么?

CSS3 是最新的 CSS 标准。

2.与CSS2.0的区别

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

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

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

3.CSS3 圆角

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

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

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

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

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

一个值： 四个圆角值相同

单一边的设置👇

border-top-left-radius

定义了左上角的弧度

border-top-right-radius

定义了右上角的弧度

border-bottom-right-radius

定义了右下角的弧度

border-bottom-left-radius

定义了左下角的弧度

代码例👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圆角</title>
  <style>
    div{
      width: 300px;
      height : 200px;
      text-align: center;
    }
    .box1{
      background-color: pink;
      border-radius: 150px/100px;
    }
    .box2{
      width: 200px;
      background-color: yellow;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="box1">
    椭圆
  </div>
  <div class="box2">
    园
  </div>
</body>
</html>

例图👇

 4.CSS3 盒子阴影

设置文字阴影 ：text-shadow:水平 垂直 模糊 颜色

添加盒子阴影  ：box-shadow:水平 垂直 模糊 颜色

代码👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子阴影</title>
  <style>
    .box1{
      width: 200px;
      height: 200px;
      background-color: pink;
      box-shadow: 10px 10px 5px gray;
    }
  </style>
</head>
<body>
  <div class="box1">盒子阴影box-shadow</div>
</body>
</html>

 图例👇

 5.CSS3 background（背景）

CSS新增背景

background-size

背景的大小。

background-origin

指定了背景图像的位置区域。
background-clip背景剪裁属性是从指定位置开始绘制。

代码例👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>背景新增</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: pink;
      padding: 20px;
    }
    .box1{
      background-clip: content-box; /*开始的位置*/
      border: 1px solid red;
      background-image: url('./imgs/2048559.jpg');
    }
    .box2{
      background-image: url('./imgs/2048559.jpg');
      background-repeat: no-repeat;
      border: 10px solid transparent;
      background-origin: content-box;
      background-size: 60px 60px;
    }
  </style>
</head>
<body>
  <div class="box1">
    <h2>background-clip</h2>
  </div>
  <div class="box2">
    <h2>background-options</h2>
  </div>
</body>
</html>

图例👇

 6.CSS3 渐变（Gradients）

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

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

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

代码例👇

   <style>
         #div1{
             width: 300px;
             height: 100px;
            background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
         }
         #div2{
             width: 300px;
             height: 300px;
             border-radius:100px;
             background-image:radial-gradient( red , orange, yellow, green, blue, indigo, violet);
         }
</style>

7.CSS3 过渡

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

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

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

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

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

代码例👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS过渡</title>
  <style>
    .box1{
      width: 100px;
      height: 100px;
      background-color: pink;
      transition: 3s;
    }
    .box1:hover{
      width: 400px;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
</body>
</html>

图例👇

8.CSS3动画

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 lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            padding: 1000px;
            perspective: 1100px;
        }
        .box {
            position: relative;
            top: 400px;
            left: 0;
            margin: auto;
            width: 200px;
            height: 300px;
            transform-style: preserve-3d;
            border-radius: 5px;
            animation: xz 6s linear infinite;
        }
        
        .box img {
            position: absolute;
            width: 200px;
            height: 300px;
            left: 0;
            top: 0;
        }
        
        @keyframes xz {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        img:nth-of-type(1) {
            transform: rotateY(30deg) translateZ(400px);
        }
        
        img:nth-of-type(2) {
            transform: rotateY(60deg) translateZ(400px);
        }
        
        img:nth-of-type(3) {
            transform: rotateY(90deg) translateZ(400px);
        }
        
        img:nth-of-type(4) {
            transform: rotateY(120deg) translateZ(400px);
        }
        
        img:nth-of-type(5) {
            transform: rotateY(150deg) translateZ(400px);
        }
        
        img:nth-of-type(6) {
            transform: rotateY(180deg) translateZ(400px);
        }
        
        img:nth-of-type(7) {
            transform: rotateY(210deg) translateZ(400px);
        }
        
        img:nth-of-type(8) {
            transform: rotateY(240deg) translateZ(400px);
        }
        
        img:nth-of-type(9) {
            transform: rotateY(270deg) translateZ(400px);
        }
        
        img:nth-of-type(10) {
            transform: rotateY(300deg) translateZ(400px);
        }
        
        img:nth-of-type(11) {
            transform: rotateY(330deg) translateZ(400px);
        }
        
        img:nth-of-type(12) {
            transform: rotateY(360deg) translateZ(400px);
        }
    </style>
    <title>动图</title>
</head>

<body>
    <div class="box">
        <img src="./images/animation/animation (1).jpg" alt="">
        <img src="./images/animation/animation (2).jpg" alt="">
        <img src="./images/animation/animation (3).jpg" alt="">
        <img src="./images/animation/animation (4).jpg" alt="">
        <img src="./images/animation/animation (5).jpg" alt="">
        <img src="./images/animation/animation (6).jpg" alt="">
        <img src="./images/animation/animation (7).jpg" alt="">
        <img src="./images/animation/animation (8).jpg" alt="">
        <img src="./images/animation/animation (9).jpg" alt="">
        <img src="./images/animation/animation (10).jpg" alt="">
        <img src="./images/animation/animation (11).jpg" alt="">
        <img src="./images/animation/animation (12).jpg" alt="">
    </div>

</body>

</html>

图解👇

9.CSS2D转换

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

2D过渡属性

translate()

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

rotate()

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

scale()

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

skew()

该元素在X轴和Y轴上倾斜

matrix()

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

10.CSS3 3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

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

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

11.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

用于屏幕阅读器

代码例👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>多媒体查询适配</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        @media screen and (max-width:321px) and (min-width:320px) {
            html {
                color: rgb(255, 255, 255);
            }
        }
        @media screen and (min-width:321px) and (max-width:375px) {
            html {
                color: blue;
            }
        }
        @media screen and (min-width:376px) and (max-width:414px) {
            html {
                color: greenyellow;
            }
        }
        p {
            font-size: 2rem;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>我在哪呢</p>
    </div>
</body>

</html>

图例👇

无奈源于不够强大

HJHO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常用CSS样式
weixin_72724407的博客
07-21 830
中文名称层叠样式表。英文全称CascadingStyleSheets，简称CSS。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS 基本样式大全（一）
qq_46028517的博客
06-09 6309
CSS 样式
CSS常用样式
热门推荐
weixin_53988377的博客
07-24 1万+
CSS常用属性集合
CSS样式
weixin_44465012的博客
06-09 1万+
文章目录 一、CSS概述 二、CSS样式添加 三，CSS选择器 四. CSS样式 一、CSS概述 是层叠样式表，作用是将内容和样式分离开，更方便修改样式而不会影响内容； 基本语法如下：（最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号） 二、CSS样式添加 方法一：行内 例：<p style=" color.red;"> 方法二：内嵌样式 例：<style type="text/css"><...
css3新增颜色表示方式分享
09-25
主要介绍了css3新增颜色表示方式，这里列出了CSS1&2颜色表示方式和CSS3 新增颜色表示方式,需要的朋友可以参考下
CSS：CSS3新增属性
01-08
CSS3新增属性 1、border-radius：圆角边框 border-radius:10px 20px 30px 40px; /*圆：值为半径*/ border-radius:10px 20px 30px 40px/20px 30px 40px 50px; /*椭圆*/ 2、box-sizing：改变盒模型的模式 box-sizing...
CSS3 新增选择器的实例
01-19
结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论...
CSS三种样式
wrnn123456的博客
10-11 1536
CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式 1.内联式css样式 内联式css样式表就是把css代码直接写在现有的HTML标签中: <p style ="color:#000099">这是一个段落标签 采用style属性。范围只针对此标签适用。 该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。 2.嵌入式css样式 在HTML文档中的< head >中使用< style >标记，，被称为内嵌式 <he.
常用CSS样式大全
m0_73442777的博客
04-09 447
CSS3 是一种用于定义网页样式的语言，它包含了许多新的样式属性和功能，让开发人员可以更加灵活地控制网页的外观和行为。
CSS3新技术
08-27
CSS3新技术
CSS样式详解
程展威的博客
07-11 2368
其中包含了大量关于CSS的内容，篇幅有些长，但作者已经尽力剪短了，需要某一部分的内容可以查看我的其他博客，我会将这些分开写，争取更加详细，望大家一起进步，如有不好的地方，欢迎指正。
CSS背景图片与CSS精灵
TKY666的博客
03-07 629
一、背景颜色 1、background-color 属性指定元素的背景色。 body { background-color: blue; } /*为页面指定一个蓝色背景*/ 二、background-image 背景图片 1.给页面添加图片背景 值：url（"图片路径"） background-image: url(图片路径.jpg); 也可以同时添加多张图片： background-image: url(图片1.jpg),url(图片2.jpg)，...; 2.b
HTML5+CSS3新增内容总结!
糖果云专栏
10-14 3078
说到H5+C3会不会觉得东西好多啊，今天就整理了一份总结性的内容； CSS3选择器有哪些？ 答：属性选择器、伪类选择器、伪元素选择器。 CSS3新特性有哪些？ 答：1.颜色：新增RGBA，HSLA模式 2. 文字阴影（text-shadow、） 3.边框： 圆角（border-radius）边框阴影： box-shadow 4. 盒子模型：box-sizing 5.背景：backgr
CSS3 详细新增内容
hero_th的博客
12-22 241
CSS3 css3新增选择器 1.属性选择器 权重为10 input[value=] input[type="val"] div[att^="val"] //以val为开头的 dic[att$="val"] //以val为结尾的 2.结构伪类选择器 ul li:first-child{} ul li:last-child{} ul li:nth-child(n){} //所有的孩子 ul li:nth-child(2){} //第2个孩子 ul li:nth-child(
CSS3新增的所有功能
lixiuxiu2017的博客
03-22 2233
对于CSS3新增的所有功能及详细使用方法在我的GitHub上有详细的讲解，详见链接https://github.com/lixiuxiu2017/CSS3这里只是列出CSS3新增的功能概括：1、CSS3介绍2、CSS3新增的超级选择器：属性选择器、结构性伪类选择器、UI元素状态伪类选择器、通用兄弟元素选择器3、使用选择器在页面中插入文字、图片、项目编号等内容4、文字阴影与自动换行5、各种盒模型：总...
详解CSS3中新增的内容属性：content
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-21 1万+
详解CSS3中新增的内容属性：content 1. 用法：content属性用于插入生成的内容，常和:before选择器和:after选择器配合使用，将生成的内容放在一个元素内容的前面或后面。 2. 基本语法：content: normal | string | attr() | uri() | counter() 说明：normal ： 默认值。string ： 查入文本的内容，一般是一个字符串。
CSS3新增特性
weixin_58139900的博客
10-04 177
目录 CSS概述 CSS3现状 浏览器的私有前缀 新盒模型 CSS3新增选择器 属性选择器 CSS3新增的属性选择器 兼容性 常用属性选择器列表： 结构伪类选择器 css3 新增的结构性伪类 总结child一组与of-type一组的区别 兼容性 ​ 表单相关选择器（状态伪类选择器 ） css3新增 兼容性 常用元素状态、用户行为伪类列表 伪元素选择器 :before :after before与after 兼容性 ::placeholder ...
css_css3新增属性
qq_57226103的博客
04-13 1405
w3c提出的某个css属性，再被浏览器正式支持前，浏览器厂商会根据浏览器内核，使用私有前缀来测试该属性，浏览器正式支持改属性后，就不需要该前缀了，Chrome、Safari和Edge浏览器私有前缀。动态伪类选择器、目标伪类选择器、UI伪类选择器、语言伪类选择器、结构伪类选择器、否定伪类选择器、伪原素选择器。表格单元格(table、thead、tbody、tfoot、th、td、tr、caption)、column-span为all原素(即使该原素没有包裹在多列容器中)、绝对定位、固定定位原素、
css3新增的选择器
最新发布
07-27
CSS3新增了许多选择器，以下是其中一些常用的选择器： 1. 属性选择器：可以根据元素的属性值来选择元素，例如`[attribute=value]`、`[attribute^=value]`、`[attribute$=value]`等。 2. 伪类选择器：用于选择元素...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值