1.选择器:
属性选择器:[];
查找条件:属性;我们可以通过属性来查找[^=][$=][*=][=][attr]
伪类选择器: ::;
::before;::after;
必须指定一个content:新添加的元素是一个行内元素。
尽量使用单冒号:before :after
2.文字阴影:text-shadow:2px 2px 5px 5px red;
3.边框:
边框圆角:border-radious:10px 10px 10px 10px;
border-radius:10px;
border-radius:10px 20px:对角线
border-radius:10px 20px 30px;
边框阴影:box-shadow:2px 2px 5px blue;
box-shadow:insert 2px 2px 5px blue;内阴影;
边框图片:border-image-source:url();
border-image-slice:22 22 22 22;
border-image-repeat:round stretch repeat;
border-image-width:30px;
4:盒模型
padding+content+border;
css3改变了这种计算方法:
width css设置的宽度:
当设置box-sizing:border-box;
width=盒子的大小:变小的是content区域。
计算方式为content = width – border - padding
当设置box-sizing:content-box;
width=content;
5.渐变色:
。1.方向;。2至少有两个颜色;。3.一定的距离;
linear-gradient(to right,yellow,green);
90deg是角度;
background:linear-gradient(
90deg,
yellow 25%,
green 25%,
green 50%,
pink 50%,
pink 75%,
blue 75%,
blue 100%);
其中的百分比是分割距离;
没有距离无法过度;
将渐变当成图片来对待;
设置背景图片大小:
当指定了背景图片尺寸时,百分比是相对于background-size;
线性渐变
径向渐变
radial-gradient(120px at center center,yellow,green);圆
radial-gradient(120px 80px at center center,yellow,green);椭圆
center center可用百分比,数值显示;
清除塌陷:给父元素设置overflow:hidden或者设置边框;
::before ::after
一个创建一个div 一个在前面和后面 这个前面和后面不是固定的 可以通过定位 随便定位置 。
过渡效果:transition:all 1s;
缩放:transform:scale(0.5);
移动:transform:translate(100px,100px);
旋转:transform:rotate(角度);
倾斜:transform:skew(10deg垂直,10deg水平);
动画:
animation:rotate 2s infinite linear;
1、必要元素:
a、通过@keyframes指定动画序列;
b、通过百分比将动画序列分割成多个节点;
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素;
2、关键属性
a、animation-name设置动画序列名称
b、animation-duration动画持续时间
c、animation-delay动画延时时间
d、animation-timing-function动画执行速度,linear、ease等
e、animation-play-state动画播放状态,play、paused等
f、animation-direction动画逆播,alternate等
g、animation-fill-mode动画执行完毕后状态,forwards、backwards等
h、animation-iteration-count动画执行次数,inifinate等
首先定义一个动画序列:
@keyframes rotate{
0% {
transform:rotateZ(0deg);
}
100%{
transform:rotateZ(360deg);
}
伸缩布局:
display:flex(伸缩布局);
两端对齐:
justify-content(主轴方向对齐):space-between;
利用了伸缩布局;
主轴:默认水平
侧轴:默认垂直
方向:主轴:从左到右;侧轴:从上到下;
flex-direction:row(水平),column(垂直),row-reverse(水平翻转从右向左),column-reverse(垂直翻转从上到下);
justify-content:flex-start:起点对齐
flex-end:终点对齐;
center:居中对齐
stretch:拉伸对齐
space-around:环绕对齐;
space-between:两端对齐;
flex-wrap:nowrap/wrap控制是否换行;
align-content:堆栈排列;
关于css3