首页 > 其他分享 >CSS3新特性

CSS3新特性

时间:2024-08-06 22:55:20浏览次数:12  
标签:CSS3 box 动画 元素 特性 阴影 边框 选择器

目录:

一、选择器的扩展

1. 属性选择器

2. 伪类选择器

3. 伪元素选择器

二、盒子模型的增强

1. box-sizing属性

2. 边框圆角(border-radius)

3. 盒阴影(box-shadow)

三、过渡和动画效果

1. 过渡效果

2. 动画效果

四、响应式布局

1. 媒体查询(media query)

2. 弹性布局(Flexbox)

一、选择器的扩展

1. 属性选择器  

属性选择器允许按照元素的某个属性来选择元素。例如,可以根据元素的属性值选择特定的元素。

/* 选择所有带有 target 属性的链接 */
a[target] {
color: blue;
}

2. 伪类选择器 

 CSS3 引入了更多的伪类选择器,可以选择元素的特殊状态或位置。例如,可以选择第一个子元素、鼠标悬停的元素等。

/* 选择第一个段落元素 */
p:first-child {
font-weight: bold;
}

/* 当鼠标悬停在链接上时改变样式 */
a:hover {
color: red;
}

3. 伪元素选择器  

可以用于选择元素的特定部分,例如元素的第一个字、第一个字母、之前的空白等。

p::first-letter {
/* 第一个字母的样式规则 */
}

二、盒子模型的增强  

CSS3对盒子模型进行了一些改进,使得我们能够更加灵活地控制元素的布局和尺寸。

1. box-sizing属性

可以用于更改元素的盒子模型算法,使得元素的宽度和高度包括边框和内边距。

默认值是content-box,这意味着元素的宽度和高度只包括内容的宽度和高度,而不包括边框(border)、内边距(padding)和外边距(margin)。

如果将box-sizing属性的值设置为border-box,则元素的宽度和高度将包括内容的宽度和高度、边框和内边距,但不包括外边距。

div {
box-sizing: border-box;
}

2. 边框圆角(border-radius)

通过设置边框圆角属性,可以使元素的边框呈现圆角效果。

/* 给一个 div 元素设置圆角边框 */
div {
border-radius: 10px;
}

3. 盒阴影(box-shadow)

用于给元素添加阴影效果。阴影可以设置水平和垂直偏移量、阴影的模糊程度、阴影的颜色等。

/* 语法 */
box-shadow: h-offset v-offset blur spread color;

/* 给一个标题添加盒阴影 */
h1 {
box-shadow: 5px 5px 5px #888888;
}

h-offset:水平偏移量,阴影在水平方向上偏移的距离。如果是负值,阴影将在元素左边。
v-offset:垂直偏移量,阴影在垂直方向上偏移的距离。如果是负值,阴影将在元素的上方。
blur:阴影的模糊程度。值越大,阴影边缘越模糊,但也越向外扩散。
spread:阴影的大小。正值会扩大阴影,负值会缩小阴影。
color:阴影的颜色。

三、过渡和动画效果  

CSS3 引入了过渡(transition)和动画(animation)功能,使得元素的状态改变更加平滑和生动。

1. 过渡效果

通过设置过渡属性,可以在元素状态改变时实现平滑的过渡效果。

/* 当鼠标悬停在链接上时,改变颜色过渡效果 */
div {
transition: background-color 0.5s ease;
}
div:hover {
background-color: #f00;
}

2. 动画效果

通过使用关键帧动画(@keyframes),可以创建自定义的动画效果。

/* 创建一个旋转动画效果 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* 应用旋转动画到一个图像 */
img {
animation: spin 2s linear infinite;
}

四、响应式布局  

CSS3 引入了响应式布局的功能,使得网页能够根据不同设备的屏幕大小和分辨率进行自适应布局。

1. 媒体查询(media query)  

用于针对不同的媒体类型定义不同的样式。媒体查询可以针对不同的屏幕尺寸、设备类型、分辨率等条件来应用不同的样式规则。

/* 当浏览器宽度小于 600px 时,改变背景颜色 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

2. 弹性布局(Flexbox)  

它是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行。

  Flexbox模型中的元素可以是行或者列,并且可以灵活地改变大小和形状。使用Flexbox布局,可以轻松地实现元素的水平和垂直居中、元素的重新排序、元素的扩展等操作。

/* 创建一个使用 Flexbox 的水平布局 */
.container {
display: flex;
justify-content: space-between;
}

 

标签:CSS3,box,动画,元素,特性,阴影,边框,选择器
From: https://www.cnblogs.com/meiyanstar/p/18346119

相关文章

  • c#12 实验特性Interceptor如何使用的一个简单但完整的示例
    一直有很多转载dotnet对Interceptor说明文档的,但鲜有说明Interceptor如何使用的,这里写一篇简单示例来展示一下c#12实验特性Interceptor是什么?官方解释如下(其实简单说就是语言特性中内置的静态编织方式的aop功能,不同于其他il修改代码的方式,使用上得结合sourcegenerater来生......
  • Mysql事务四大特性的介绍
    1数据库事务        数据库的事务(Transaction)是一种机制、一个操作序列,包含了一组数据库操作命令。事务把所有的命令作为一个整体一起向系统提交或撤销操作请求,即这一组数据库命令要么都执行,要么都不执行,因此事务是一个不可分割的工作逻辑单元。在数据库系统上执行并......
  • 挂载Ceph文件系统以及Ceph存储三副本特性展示
    创建文件系统cephfsvolumecreatecephfs 挂载CephFS的常规先决条件为客户端主机生成最小的conf文件并将其放在标准位置:mkdir-p-m755/etc/cephssh{user}@{mon-host}"sudocephconfiggenerate-minimal-conf"|sudotee/etc/ceph/ceph.conf确保conf具......
  • 【C++】C++特性揭秘:引用与内联函数 | auto关键字与for循环 | 指针空值
    C++语法相关知识点可以通过点击以下链接进行学习一起加油!命名空间缺省参数与函数重载本章将分享C++增加的几种常见特性,主要内容为引用与内联函数|auto关键字与for循环|指针空值,这些知识看似很多,实际也不少。本章篇幅长,耐心享用,若有不足,欢迎指出!......
  • 【Spark计算引擎----第二篇(RDD):一篇文章带你清楚什么是RDD?RDD的概念,RDD的特性,怎么创建
    前言:......
  • 小迪安全-Web攻防-文件上传-JS验证&mime&user.ini&语言特性
    一、知识点1、文件上传-前端验证2、文件上传-黑白名单3、文件上传-user.ini妙用4、文件上传-PHP语言特性二、详细点1、检测层面:前端,后端前置:后门代码需要用特定格式后缀解析,不能以图片后缀解析解析脚本后门代码(解析漏洞除外)如:JPG图片里面有PHP后门代码,不能被触发,所以连......
  • ECMAScript 12 (ES12, ES2021) 新特性
    还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。No.内容链接1Openlayers【入门教程】-......
  • RabbitMQ高级特性 - 消息分发(限流、负载均衡)
    文章目录RabbitMQ消息分发概述如何实现消费分发机制(限制每个队列消息数量)使用场景限流背景实现demo非公平发送(负载均衡)背景实现demoRabbitMQ消息分发概述RabbitMQ的队列在有多个消费者订阅时,默认会通过轮询的机制将消息分发给不同的消费者,但是有些消费者......
  • RabbitMQ知识总结(基本原理+高级特性)
    文章收录在网站:http://hardyfish.top/文章收录在网站:http://hardyfish.top/文章收录在网站:http://hardyfish.top/文章收录在网站:http://hardyfish.top/基本原理消息的可靠性投递RabbitMQ消息的投递路径为:生产者------>交换机------>队列------>消费者在Ra......
  • HTML5+CSS3笔记(Xmind格式):第一天
    Xmind鸟瞰图:文字总结:1.新增语义化标签:-header:定义文档的页眉,用来表示页面的头部。-nav:定义导航链接的部分nav元素代表页面中的导航,其中的导航元素链接到其他页面或当前页面的其他部分。-main:主体信息-aside:侧边栏-article:article元素表示文档、页面或应用程......