1.伪类:a:hover a:link div:nth-child(n)
伪元素:before after first-letter
2.使用before和after必须要有content这个属性
3.before和after默认是行内元素,行内元素是没有宽高的。
4.加了浮动或者绝对定位的元素,默认把行内元素转换为行内块元素。
5.CSS绘制各种形状代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS绘制各种形状</title> <style> div{ width: 100px; height: 100px; margin:100px; background-color:#FF5008; text-align: center; /*左右居中对齐*/ line-height: 100px; /*上下居中对齐*/ } .circle{ border-radius: 50%; /*半径为50%*/ } .semi-circle{ border-radius: 50px 50px 0 0; height: 50px; } .sector{ border-radius: 0 0 100px 0; } .arc{ border-radius: 0 100px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } /*小三角*/ .arrow{ width: 0; height: 0; background: none; border: 50px solid red; border-color:red transparent transparent transparent; } /* *rectangle相关的都是为了实现类似于对话框的效果 */ .rectangle{ width: 200px; border-radius: 15px; position: relative; } .rectangle::before{ width: 0; height: 0; content:''; border:15px solid red; border-color: transparent transparent transparent #FF5008; /*transparent表示透明*/ position: absolute; right:-30px; top:35px; /*(100-15-15)/2=35*/ } /* *以下跟heart有关的都是心形的制作 */ .hear{ width: 100px; height: 150px; background: none; position: relative; /*子绝父相*/ } .hear::before,.hear::after{ content: ""; /*content属性一定不能省*/ width: 100%; height: 100%; background-color: red; position: absolute; /*通过定位给这个行内元素转换为行内块,让它有了宽和高*/ border-radius: 100px 100px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .hear::after{ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left:85px; /*after元素做一个移动*/ } .lgbox,.mbox,.smbox{ margin: 0; visibility: hidden; /*隐藏显示,但是是占位置的*/ } .lgbox{ width: 200px; height: 250px; margin: 200px; background: #f552ff; transform: rotate(120deg); } .mbox{ width: 100%; height: 100%; background: #2e51ff; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } .lgbox,.mbox{ overflow: hidden; } .smbox{ width: 100%; height:100%; background-color: #02ff1c; transform: rotate(-60deg); visibility: visible; /*最上面的这个盒子显示出来*/ background: url("images/01.png") no-repeat; -webkit-background-size: cover; background-size: cover; } </style> </head> <body> <div>矩形</div> <div class="circle">圆形</div> <div class="semi-circle">半圆</div> <div class="sector">扇形</div> <div class="arc">弧形</div> <div class="arrow"></div> <div class="rectangle">特效矩形</div> <div class="hear"></div> <div class="lgbox"> <div class="mbox"> <div class="smbox"></div> </div> </div> <div class="lgbox"> <div class="mbox"> <div class="smbox" style="background-image: url(images/02.png)"></div> </div> </div> </body> </html>运行效果:
注:学习视频来自传智播客