CSS3也是层叠样式表，在CSS2的基础上添加了许多的属性与内容 重要的CSS3内容：渐变、过渡、转换、动画 关系选择器与伪类选择器的一些内容是C3新增的 例如： <!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">
<title>Document</title>
<style>
ul , ol {
padding: 0;
margin: 0;
list-style: none;
}
</style>
</head>
<body>
<style>
ul li , ul div {
width: 300px;
height: 30px;
border: 1px solid #000;
margin-top: 10px;
}
/* 为什么设置不了最后一个li标签的背景色（是因为你写代码的时候，都不关注html结构） */
/* 最后一个标签不是li标签 */
/* 没有指定子元素 */
ul li:last-child {
/* background-color: red; */
}
/* 指定子元素 */
ul li:last-of-type {
/* background-color: green; */
}
/*
:first-child
:first-of-type
:nth-child(数字/表达式){}
:nth-of-type(数字/表达式){}
*/
ul li:nth-child(2){
/* background-color: blue; */
}
ul li:nth-child(2n-1){ /*n 代表1，2，3，4，5，....n */
background-color: blue;
}
</style>
<ul style="display: none;">
<li>li标签</li>
<li>li标签</li>
<li>li标签</li>
<li>li标签</li>
<li>li标签</li>
<li>li标签</li>
<!-- <div> div 标签</div> -->
</ul>
<style>
ol li {
width: 300px;
height: 30px;
border: 1px solid #000;
margin-top: 10px;
}
/* 选择没有内容的标签 */
ol li:empty {
/* background-color: blue; */
}
/* 选择除了类名为.demo的所有li标签 */
ol li:not(.demo) {
/* background-color: yellowgreen; */
}
/* 出现相应的锚点 #example */
ol li:target {
background-color: deepskyblue;
}
</style>
<ol style="display: none;">
<a href="#example">设置锚点对应的标签背景</a>
<li>li标签</li>
<li></li>
<li class="demo">li标签 demo</li>
<li>li标签</li>
<li id="example">li标签 example</li>
<li>li标签</li>
</ol>
<style>
div p {
width: 300px;
height: 30px;
border: 1px solid #000;
}
/* 属性选择器 */
/* 选择类名为box的p标签 */
p[class='box'] {
background-color: green;
}
/* 开头 */
p[class^='d'] {
background-color: red;
}
/* 结束 */
p[class$='aaaa'] {
background-color: blue;
}
/* 包含 */
p[class*='1'] {
background-color: yellow;
}
</style>
<div style="display: none;">
<!-- 同一个标签，类名可以有多个 。ID页面只能是唯一的-->
<p class="dbox">p标签 1</li>
<p class="box1xxxx">p标签 2</li>
<p class="boxaaaa">p标签 3</li>
<p class="box">p标签 4</li>
</div>
<style>
div h3 {
width: 300px;
height: 30px;
border: 1px solid #000;
}
/* 选择相邻关系的下一个元素 */
.demo + h3 {
/* background-color: red; */
}
/* 选择当前标签后的所以兄弟元素 */
.demo ~ h3 {
background-color: green;
}
</style>
<div>
<h3>h3标签1</h3>
<h3 class="demo">h3标签2</h3>
<h3>h3标签3</h3>
<h3>h3标签4</h3>
<h3>h3标签5</h3>
</div>
</body>
</html>
<!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">
<title>Document</title>
<style>
/*
min-width 最小宽度 >= 300
max-width 最大宽度 <= 600
*/
/*
媒体查询：
监视屏幕尺寸 可以设置元素不同的样式
*/
.layout {
height: 1000px;
}
/* 当屏幕尺寸宽度小于等于600 div标签背景色为红色 */
@media screen and (max-width: 600px){
.layout {
background-color: red;
}
}
@media screen and (min-width: 601px) and (max-width: 1200px){
.layout {
background-color: green;
}
}
@media screen and (min-width: 1201px){
.layout {
background-color: blue;
}
}
@media screen and (min-width: 1201px) and (max-height:600px){
.layout {
background-color: orange;
}
}
</style>
</head>
<body>
<div class="layout"></div>
</body>
</html>
盒子模型中的box-sizing: border-box也是C3新增的 background-origin也是C3新增的 background-clip也是C3新增的 边框背景图border-image /* no border-image, use the specified border-style */
border-image-source: none;
/* the image.jpg is used as image */
border-image-source: url(image.jpg);
/* a gradient is used as image */
border-image-source: linear-gradient(to top, red, yellow);
border-image-slice
通过border-image-source 引用边框图片后，border-image-slice属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。 切割完 border 的背景切片后，并且也已经设置了 border 的宽度（重要）。将相应的切片填充到 border 的相应位置。需要注意的是：不论 border 的宽度设置的多大，后面切割的参数都是根据 border-image 引入图片的尺寸设置的参数, 或者说是根据引入图片大小设置的切割参数。切割后的四周的八个切片，四个角根据 border 设置的大小全尺寸自动缩放显示到 border 对应的四个角。 语法： /* 所有的边 */
border-image-slice: 30%;
/* 垂直方向 | 水平方向 */
border-image-slice: 10% 30%;
/* 顶部 | 水平方向 | 底部 */
border-image-slice: 30 30% 45;
/* 上 右 下 左 */
border-image-slice: 7 12 14 5;
border-image-slice: fill; //保留图像的中间部分//四个角显示整个图像，其他5个区域没有背景
border-image-width
指定了边界图像 (border image) 的宽度 如果本属性值大于元素的 border-width，边界图像将会向 padding 边缘延展 语法： /* 关键字 */
border-image-width: auto;
/* 长度 */
border-image-width: 1rem;
/* 百分比 */
border-image-width: 25%;
/* 数值 */
border-image-width: 3;
/* 垂直 | 水平 */
border-image-width: 2em 3em;
/* 上 | 横向 | 下 */
border-image-width: 5% 15% 10%;
/* 上 | 右 | 下 | 左 */
border-image-width: 5% 2em 10% auto;
/* border-image-outset: sides */
border-image-outset: 30%;
/* border-image-outset:垂直 水平 */
border-image-outset: 10% 30%;
/* border-image-outset: 顶 水平 底 */
border-image-outset: 30px 30% 45px;
/* border-image-outset:顶 右 底 左 */
border-image-outset: 7px 12px 14px 5px;
border-image-repeat
定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。 语法： border-image-repeat: type
/* One-value syntax */
E.g. border-image-value: stretch;
border-image-repeat: horizontal vertical
/* Two-value syntax */
E.g. border-image-width: round space;
//stretch 拉伸图片以填充边框。
//repeat 平铺图片以填充边框。
//round 平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。
//space 平铺图像 。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）
border-image
属性是简写属性，用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。 语法： border-image: source slice width outset repeat
<!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">
<title>Document</title>
<style>
body{
background-color: aqua;
}
.box-1 {
width: 400px;
height: 400px;
background-color: #cccccc55;
border: 50px solid transparent;
margin: 100px;
font-size: 30px;
box-sizing: border-box;
/* 设置边框背景图片 */
/* border-image-source: url(./img/demo-border.png); */
/* border-image-source: url(./img/border-demo.png); */
border-image-source: url(./img/1.png);
/* 裁剪边框背景图 */
/* 把图片中的四个角的图标分别设置在盒子的边框上 */
border-image-slice: 50 50 50 50;
/* 设置边框背景图的大小 */
border-image-width: 50px;
/* 设置边框背景图的位置（内外） */
border-image-outset: 0px;
/* 设置边框背景图平铺 repeat round(自动计算图标的位置)*/
border-image-repeat: round;
}
</style>
</head>
<body>
<div class="box-1">
hello world
</div>
</body>
</html>
阴影属性 /* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/*
向元素添加单个 box-shadow 效果时使用以下规则：
当给出两个、三个或四个 <length>值时:
1.如果只给出两个值, 那么这两个值将会被当作 <offset-x><offset-y> 来解释。
2.如果给出了第三个值, 那么第三个值将会被当作<blur-radius>解释。
3.如果给出了第四个值, 那么第四个值将会被当作<spread-radius>来解释。
可选，inset关键字。
可选，<color>值。
//inset 如果没有指定inset，默认阴影在边框外，即阴影向外扩散。
//使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。 此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。
*/
文字阴影 text-shadow:为文字添加阴影。 语法： /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;
/* 任意数量的阴影，以逗号分隔 */
text-shadow: 1px 1px 2px black,3px 3px 3px red;
线性渐变 CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于gradient数据类型，是一种特别的image数据类型。 语法：linear-gradient(方向,颜色及占比,颜色及占比,颜色及占比…) //1.默认情况下，线性渐变的方向是从上到下
.simple-linear {
background: linear-gradient(blue, pink);
}
//2.默认情况下，线性渐变的方向是从上到下， 你可以指定一个值来改变渐变的方向。
.horizontal-gradient {
background: linear-gradient(to right, blue, pink);
}
//3.你甚至可以设置渐变方向为从一个对角到另一个对角。
.diagonal-gradient {
background: linear-gradient(to bottom right, blue, pink);
}
//4.如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。
.angled-gradient {
background: linear-gradient(70deg, blue, pink);
}
//5.可以给颜色占比
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
//6. 形成条纹：
.box-3 {
background-image: linear-gradient(
to right,
red 10%,/*开始颜色*/
red 20%,/*结束颜色*/
green 20%,/*结束颜色*/
green 30%,/*结束颜色*/
yellow 30%,/*结束颜色*/
yellow 40%,/*结束颜色*/
purple 40% /*结束颜色*/
)
}
<!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">
<title>Document</title>
<style>
div[class^='box'] {
width: 200px;
height: 200px;
margin: 5px;
}
.box-1 {
/* background-color: #ccc; */
/* background: linear-gradient(参数); */
/* background-image: linear-gradient(参数); */
/* 线性渐变（背景颜色从元素的一侧往另一侧逐渐改变） */
background-image: linear-gradient(
to right,
red,/*开始颜色*/
green ,/*结束颜色*/
yellow,/*结束颜色*/
purple/*结束颜色*/
)
}
.box-2 {
background-image: linear-gradient(
to right,
red 10%,/*开始颜色*/
green 20%,/*结束颜色*/
yellow 30%,/*结束颜色*/
purple 40% /*结束颜色*/
)
}
.box-3 {
background-image: linear-gradient(
to right,
red 10%,/*开始颜色*/
red 20%,/*结束颜色*/
green 20%,/*结束颜色*/
green 30%,/*结束颜色*/
yellow 30%,/*结束颜色*/
yellow 40%,/*结束颜色*/
purple 40% /*结束颜色*/
)
}
.box-3 {
background-image: linear-gradient(
135deg,
red 10%,/*开始颜色*/
red 20%,/*结束颜色*/
green 20%,/*结束颜色*/
green 30%,/*结束颜色*/
yellow 30%,/*结束颜色*/
yellow 40%,/*结束颜色*/
purple 40% /*结束颜色*/
)
}
/* 线性渐变（to left top right bottom） 角度 0 ~ 360deg */
</style>
</head>
<body>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</body>
</html>
径向渐变 radial-gradient() CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS gradient数据类型的对象，其是 image的一种。 径向渐变(Radial gradients)由其中心点、边缘形状轮廓、两个或多个色值结束点（color stops）定义而成。 语法：background-image: radial-gradient(shape ||size, at position, start-color, …, last-color);
在参数中shape与size只取一个 shape 确定圆的类型:
ellipse (默认): 指定椭圆形的径向渐变。 circle ：指定圆形的径向渐变 size 定义渐变的大小，可能值：
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边 position 定义渐变的位置。可能值：
center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。 start-color, …, last-color 用于指定渐变的起止颜色。 例子： <!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">
<title>Document</title>
<style>
[class^='box'] {
width: 200px;
height: 200px;
margin: 10px;
}
/*
径向渐变： 背景色从中心往四周辐射发生改变。
中心坐标 四周
*/
.box-1 {
background-image: radial-gradient(at center center,
red,
green,
yellow,
purple);
}
.box-2 {
background-image: radial-gradient(at left center,
red,
green,
yellow,
purple);
}
.box-3 {
background-image: radial-gradient(at center center,
red 10%,
red 30%,
green 30%,
green 60%,
yellow 60%);
}
.box-4 {
background-image: radial-gradient(
closest-side at 50px 50px,
red,
yellow,
green);
}
/*
https://www.runoob.com/css3/css3-gradients.html
*/
</style>
</head>
<body>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
</body>
</html>
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。 transition-property 需要过渡的属性 transition-delay 过渡延迟执行的时间 transition-duration 完成过渡的时间 transition-timing-function 过渡时的效果
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。默认值。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 transition 简写属性 transition：property duration delay timing-function 例子： <!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">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
/* 过渡属性名称 */
/* transition-property: width,height; */
transition-property: all;
-webkit-transition-property: all;
/* 过渡持续的时间 s：秒 ms：毫秒 */
transition-duration: 2s;
/* 贝塞尔曲线（有两个控制点）控制运动的状态 cubic-bezier(x0, y0, x1, y1) */
/* 可以找线上的工具找出贝塞尔曲线的控制点 */
/* linear 匀速 */
/* ease-in 先慢后快 , ease-out 先快后慢*/
transition-timing-function: linear;
/* 延迟执行过渡 */
transition-delay: 0s;
/*
-webkit- 谷歌 safari
-moz- 火狐
-o- 欧鹏浏览
-ms- IE
*/
}
.box:hover {
width: 500px;
height: 300px;
}
/* 结论：
采用css3制作一些动画效果，可以减少dom操作，也是说不用编写animate.js工具。
*/
.demo {
height: 100px;
margin-top: 10px;
background-color: #ccc;
}
.demo .bar {
width: 100px;
height: 100px;
background-color: green;
/* 简写 */
transition: margin-left 1s 0s linear ;
}
.demo:hover .bar {
margin-left: 500px;
}
</style>
</head>
<body>
<!-- 100px 可以看见这个过程变化 500px -->
<div class="box"></div>
<div class="demo">
<div class="bar"></div>
</div>
</body>
</html>
1527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
