今天复习了CSS3新增属性，并做了一些demo，案例如下，一起学习…
（请忽略兼容性问题和代码顺序规范问题）兼容问题可通过caniuse.com网站查询并加前缀解决
1.鼠标经过图片放大
核心语法：
img:hover {
/*鼠标经过时，大小变为原来1.1倍*/
transform:scale(1.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 demo1 鼠标经过图片fda</title>
<style type="text/css">
body {
text-align: center;
}
img {
border-radius: 50%;
/*过渡效果：0.5s过渡完成全部属性*/
/* 属性兼容性查询 caniuse.com */
transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
cursor: pointer;
}
img:hover {
/*鼠标经过时，大小变为原来1.1倍*/
transform:scale(1.1);
}
</style>
</head>
<body>
<img src="./panda.jpeg"/>
</body>
</html>
2. a标签的动态伪类选择器+input状态选择器
核心语法：
a:link 未访问的链接的状态
a:visited 以访问的链接状态
a:hover 鼠标移动到链接上时的链接状态
a:active 选定（点击，鼠标按下未松开）时的链接状态
根据点击链接时，链接状态的变化可知，书写顺序不可变，记忆方法：LoVe HAte
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo2 a标签的动态伪类选择器+input状态选择器</title>
<style>
/*a标签的动态伪类选择器*/
a:link{
color: #666;
}
a:visited{
color: #f00;
}
a:hover{
color:#000;
}
a:active{
color:#0f0;
}
/*ui元素状态选择器，用于表单中*/
input:enabled{
background-color: #0f0;
}
input:disabled{
background-color: #f00;
}
</style>
</head>
<body>
<a href="">demo2</a><br>
<input type="text"><br/>
<input type="text" disabled>
</body>
</html>
3. 结构伪类选择器
核心语法：
.demo li:first/last-child 选中 . demo下的第一个/最后一个 li
.demo li:nth-child($$) 选中 . demo下的第满足$$要求的 li
.demo li:nth-of-type(3) 选中 . demo下的第三个的 li（此时本例中的<p>元素为第一个元素）
.demo li:empty 选中 . demo下为空的li标签
注意：结构中的<p>标签只有在验证.demo li:nth-of-type(3) 时添加，其他时候去掉；验证时按注释的序号一段一段验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo3 结构伪类选择器</title>
<style>
*{
padding: 0;
margin: 0;
}
.clearfix{
clear: both;
overflow: auto;
}
.demo{
width: 300px;
margin: 100px auto;
padding: 10px;
border: 1px solid #ccc;
}
.demo li{
float: left;
width:20px;
padding: 2px;
margin-right: 4px;
list-style: none;
border:1px solid #ccc;
}
.demo a{
display: block;
width: 20px;
height: 20px;
text-align: center;
text-decoration: none;
border-radius: 10px;
background-color: #f36;
}
/*1、 第一个元素和最后一个元素加相应样式*/
.demo li:first-child{
background-color: #0f0;
}
.demo li:last-child{
background-color: #00f;
}
/*2、 奇偶行隔行设置相应样式 :nth-child()*/
.demo li:nth-child(2n){
/*偶数行背景色为黄色*/
background-color: yellow;
}
.demo li:nth-child(2n+1){
/*奇数行背景色为蓝色*/
background-color: blue;
}
/*3、 按要求行数设置样式*/
.demo li:nth-child(n+5){
background-color: pink;
}
.demo li:nth-last-child(3){
/*选中从后向前数第三个标签并设置样式*/
background-color: red;
}
/*4、 nth-of-type 限制显示的标签只能为li，其他标签不算*/
.demo li:nth-child(3){
background-color: yellow;
}
.demo li:nth-of-type(3){
background-color: #d3a0a3;
}
.demo li:last-of-type{
background-color: #0f0;
}
/*5、 标签内为空时选中该标签*/
.demo li:empty{
background-color: #d3a0a3;
}
</style>
</head>
<body>
<div class="demo">
<ul class="clearfix">
<p> 0 </p>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
</body>
</html>
4、伪元素
核心语法：
.demo::first-letter 选中文中第一个字
.demo::first-line 选中文中第一行
.demo01::before 在选中的元素前面加一个伪元素
.demo01::after 在选中的元素后面加一个伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo4 CSS伪元素</title>
<style>
.demo{
width: 300px;
margin: 50px auto;
padding:10px;
border:1px solid #ccc;
}
/*首字下沉*/
.demo::first-letter{
float:left;
font-size: 40px;
font-weight: bold;
}
/*首行突出显示*/
.demo::first-line{
color:#f66;
}
/*demo01： 伪元素实现结构样式分离*/
.demo01{
width: 600px;
margin:10px auto;
padding:10px;
color:blue;
font-size: 40px;
text-align: center;
border:1px solid #ccc;
}
.demo01::before{
content:url(./timg.jpg);
display:block;
}
.demo01::after{
content:url(./timg1.jpg); /*content属性必须有，可为空*/
display:block;
}
</style>
</head>
<body>
<div class="demo">
伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西，伪元素：before和：after可以做很多东西。
</div>
<div class="demo01">
玩转CSS3新特性
</div>
</body>
</html>
5、圆角border-radius
核心语法：
border-radius：左上角 右上角 右下角 左下角（左上角开始顺时针方向）
参数可为 px 和 %形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo5 border-radius</title>
<style>
.demo{
width: 100px;
height: 200px;
margin:50px auto;
background-color: #f66;
border: 1px solid #ccc;
border-radius:100px 0px 0px 100px;
}
</style>
</head>
<body>
<div class="demo">
</div>
</body>
</html>
6、画三角形
技术核心：伪元素 + 定位 + border的巧妙使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画三角形</title>
<style>
.demo{
position:relative;
width: 300px;
height: 25px;
margin: 50px auto;
padding:10px;
color: #fff;
background-color
最低0.47元/天 解锁文章
4653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
