目录:
一、选择器的扩展
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