一文讲清楚CSS3新特性

文章目录

  • 一文讲清楚CSS3新特性
  • 1. 新增选择器特性
  • 2. 新增的样式
  • 3. 新增布局方式

一文讲清楚CSS3新特性

1. 新增选择器特性

  • 层次选择器(div~p)选择前面有div的p元素
  • 伪类选择器
    • :first-of-type 表示⼀组同级元素中其类型的第⼀个元素
    • :last-of-type 表示⼀组同级元素中其类型的最后⼀个元素
    • :only-of-type 表示没有同类型兄弟元素的元素
    • :only-child 表示没有任何兄弟的元素
    • :nth-child(n) 根据元素在⼀组同级中的位置匹配元素
    • :nth-last-of-type(n) 匹配给定类型的元素,基于它们在⼀组兄弟元素中的位置,从末尾开始计数
    • :last-child 表示⼀组兄弟元素中的最后⼀个元素
    • :root 设置HTML⽂档
    • :empty 指定空的元素
    • :enabled 选择可⽤元素
    • :disabled 选择被禁⽤元素
    • :checked 选择选中的元素
    • :not(selector) 选择与 不匹配的所有元素
  • 属性选择器
  • [attribute*=value]:选择attribute属性值包含value的所有元素
  • [attribute^=value]:选择attribute属性开头为value的所有元素
  • [attribute$=value]:选择attribute属性结尾为value的所有元素

2. 新增的样式

  • border-radius,设置圆角边框
  • border-image,设置图片边框
  • box-shadow,为元素添加阴影
  • background-clip,确定背景画区
  • background-origin,设置图片的左上角对齐方式
  • background-size,设置背景图片的大小
  • background-break,设置背景分裂的方式
  • word-wrap,设置单词的换行方式,normal,整词换行;break-word,词内换行
  • text-overflow,设置文本溢出的显示方式,clip,截断;ellipsis,截断并用…代替
  • text-shadow,添加文本阴影
  • text-decoration,text-fill-color,设置文字内部填充颜色;text-stroke-color;设置文字边界填充颜色;text-stroke-width,设置文字边界宽度
  • 新增rgba颜色方式,=RGB+opacity
  • 新增hala颜色方式,h为色相,s为饱和度,l为亮度,a为透明底
  • transition过度,transition:css属性,花费时间,效果曲线,延迟时间;css属性=transition-property;花费时间=transition-duration;效果曲线=transition-timing-function;延迟时间=transition-delay
  • transform变化
    • translate(px,px)位移
    • scale(1,03)缩放
    • rotate(02.turn)旋转
    • skew(30deg,20deg)倾斜
  • animation动画
    • animation-name:动画名称
    • animation-duration:动画持续时间
    • animation-timing-function:动画时间函数
    • animation-delay:动画延迟时间
    • animation-iteration-count:动画执行次数
    • animation-direction:动画执行方向
    • animation-play-state:动画播放状态
    • animation-fill-mode:动画填充模式
  • linear-gradient线性渐变
  • radial-gradient景象线变

3. 新增布局方式

  • 包括flex布局,Grid布局,媒体查询等, 看我的这几篇文章
  • https://blog.csdn.net/xiaobangkeji/article/details/144829721
  • https://blog.csdn.net/xiaobangkeji/article/details/144834010
  • https://blog.csdn.net/xiaobangkeji/article/details/144835580
  • https://blog.csdn.net/xiaobangkeji/article/details/144852599

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/64589.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Ubuntu使用技巧】Ubuntu22.04无人值守Crontab工具实战详解

一个愿意伫立在巨人肩膀上的农民...... Crontab是Linux和类Unix操作系统下的一个任务调度工具,用于周期性地执行指定的任务或命令。Crontab允许用户创建和管理计划任务,以便在特定的时间间隔或时间点自动运行命令或脚本。这些任务可以按照分钟、小时、日…

第十六届蓝桥杯模拟赛(第一期)(C语言)

判断质因数 如果一个数p是个质数,同时又是整数a的约数,则p称为a的一个质因数。 请问2024有多少个质因数。 了解 约数,又称因数。整数a整除整数b,b为a的因数(约数)质数,又称素数。只有1和它本身两…

electron在arm64架构交叉编译遇到libnotify/notify.h文件找不到错误记录

问题描述 在按照官方文档进行arm64下electron编译时出现下面的错误,编译环境为ubuntun22.04.5。 问题分析 由于当前目标架构是arm64,所以从上图可知sysroot为build/linux/debian_bullseye_arm64-sysroot,进入到该目录下查看libnotify的头文…

KAFKA入门:原理架构解析

文章目录 一、认识kafka二、架构介绍2.1 工作流程2.2 Kafka可靠性保证2.3 Kafka存储 一、认识kafka Kafka到底是个啥?用来干嘛的? 官方定义如下: Kafka is used for building real-time data pipelines and streaming apps. It is horizont…

论文分享 | PromptFuzz:用于模糊测试驱动程序生成的提示模糊测试

大语言模型拥有的强大能力可以用来辅助多种工作,但如何有效的辅助仍然需要人的精巧设计。分享一篇发表于2024年CCS会议的论文PromptFuzz,它利用模型提示生成模糊测试驱动代码,并将代码片段嵌入到LLVM框架中执行模糊测试。 论文摘要 制作高质…

利用Python爬虫获取1688商品详情的探索之旅

在当今数字化时代,数据已成为一种宝贵的资源。对于电商行业来说,获取商品信息尤为重要。阿里巴巴旗下的1688平台,作为中国领先的B2B电子商务平台,提供了海量的商品信息。本文将带你了解如何使用Python爬虫技术,合法合规…

[算法] [leetcode-1137] 第 N 个泰波那契数

1137 第 N 个泰波那契数简单 泰波那契序列 Tn 定义如下: T0 0, T1 1, T2 1, 且在 n > 0 的条件下 Tn3 Tn Tn1 Tn2 给你整数 n,请返回第 n 个泰波那契数 Tn 的值。 示例 1: 输入:n 4 输出:4 解释&#x…

macOS上怎么制作条形码

推荐使用Barcode Flow APP,目前支持iOS、macOS、iPadOS 大家可以在app store里面搜索 支持几乎所有条形码的格式 gs128、code128、DataMaxitr等等。 导出和打印都可以。 还支持工具规则自动生成。

位运算与操作符应用

一.二进制与进制转化 1.概念解析 我们常常能听见2进制,8进制,16进制这些讲法。他们都是数值的不同表达形式。根据不同的进制大小有着不同的权重比例。我们生活中常用的是10进制数,也就是逢10进1,由此推理至其他进制。例如2进制就…

适配器模式概述

大体介绍 适配器模式(Adapter Pattern)是一种结构型设计模式,其核心目的是通过提供一个适配器类来使得原本接口不兼容的类可以一起工作。它通过将一个类的接口转换成客户端所期望的接口,使得原本因接口不兼容而无法一起工作的类可…

计算机专业考研 408 学科学习方法

计算机专业考研 408 学科涵盖数据结构、计算机组成原理、操作系统和计算机网络四门核心课程,内容多且难度大。但只要掌握科学的学习方法,便能化繁为简,稳步提升。以下为大家详细介绍 408 学科的学习方法。 一、基础夯实阶段:全面…

C++ 设计模式:命令模式(Command Pattern)

链接:C 设计模式 链接:C 设计模式 - 访问器模式 命令模式(Command Pattern)是一种行为型设计模式,它将请求封装成一个对象,从而使你可以用不同的请求对客户进行参数化,对请求排队或记录请求日志…

html+css+js网页设计 美食 美食4个页面带js

htmlcssjs网页设计 美食 美食4个页面带js 网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作)。 获取源码 1&#…

swagger,showdoc,apifox,Mock 服务,dubbo,ZooKeeper和dubbo的关系

Swagger、ShowDoc 和 Apifox 之间的区别与优势 Swagger、ShowDoc 和 Apifox 都是用于 API 文档管理和测试的工具,但它们各有特色和适用场景。以下是详细的比较,并附上每个工具的具体用法示例。 1. Swagger 特点与优势: 广泛采用: Swagger…

边沿检测电路漏检原因分析

边沿检测电路漏检原因分析 常用结构如下&#xff1a; module edge_detect1( input clk, input signal, output pe, //上升沿 output ne, //下降沿 output de //双边沿 );reg reg1;always(posedge clk) beginreg1 < signal; endassign pe (~reg1) & signal; assign…

嵌入式硬件杂谈(七)IGBT MOS管 三极管应用场景与区别

引言&#xff1a;在现代嵌入式硬件设计中&#xff0c;开关元件作为电路中的重要组成部分&#xff0c;起着至关重要的作用。三种主要的开关元件——IGBT&#xff08;绝缘栅双极型晶体管&#xff09;、MOSFET&#xff08;金属氧化物半导体场效应晶体管&#xff09;和三极管&#…

鸿蒙开发:了解正则表达式

前言 从给出的文本中&#xff0c;按照既定的相关规则&#xff0c;匹配出符合的数据&#xff0c;其中的规则就是正则表达式&#xff0c;使用正则表达式&#xff0c;可以使得我们用简洁的代码就能实现一定复杂的逻辑&#xff0c;比如判断一个邮箱账号是否符合正常的邮箱账号&…

Kafka的acks机制和ISR列表

Kafka 是一个流行的分布式流处理平台&#xff0c;用于构建实时数据流管道和应用程序。在 Kafka 中&#xff0c;acks 机制和 ISR&#xff08;In-Sync Replicas&#xff09;列表是两个重要的概念&#xff0c;它们共同确保消息的持久性和可靠性。 acks 机制 acks 机制是 Kafka 生…

在 Ubuntu 下通过 Docker 部署 Caddy 服务器

嘿&#xff0c;伙伴们&#xff01;今天我们来聊聊如何在 Ubuntu 系统下通过 Docker 部署 Caddy 服务器。Caddy 是一个现代的 Web 服务器&#xff0c;支持自动 HTTPS&#xff0c;简单易用&#xff0c;特别适合快速搭建网站。而 Docker 则是一个让你可以隔离和管理应用的神器。结…

计算机网络•自顶向下方法:网络层介绍、路由器的组成

网络层介绍 网络层服务&#xff1a;网络层为传输层提供主机到主机的通信服务 每一台主机和路由器都运行网络层协议 发送终端&#xff1a;将传输层报文段封装到网络层分组中&#xff0c;发送给边缘路由器路由器&#xff1a;将分组从输入链路转发到输出链路接收终端&#xff1…