demo0 css宽度 高度 相等
1
2
3
4
5
6
7
1
2
3
4
5
6
7
.demo0 li{position:relative;width:calc(25% - 10px);height:0;padding:0 0 calc(25% - 10px);}
.demo0 li div{position:absolute;width:100%;height:100%;}
demo1 宽度 百分比和像素
width:30%
calc(70% - (10px + 5px) * 2)
calc(50% - (50px + 10px))
calc(50% - (50px + 10px))
75px
calc(100vw - 200px)
//宽度 百分比和像素
vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;
.box {
height: 50px;
width: 90%;/*写给不支持calc()的浏览器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);
}
demo2 高度 百分比和像素
height:100%;
calc(100% - 100px);
calc(50% - (30px + 10px));
calc(100vh - 200px);
//高度 百分比和像素
vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
.box {
width: 240px;
height: calc(100vh - 95px);
}
demo3 英文大写小写
text-transform
text-transform
text-transform
text-transform
text-transform: uppercase; 全部大写
text-transform: capitalize; 开头大写
text-transform: lowercase; 全部小写
demo4 css箭头
//s实心箭头
.demo4 li span{display:inline-block;}
.demo4 li:first-child span,.demo4 li:last-child span{width:0;height:0;border: 10px solid transparent;}
.demo4 li:first-child span{border-left-color:orange;}
.demo4 li:last-child span{border-right-color:orange;}
//空心箭头
.demo4 li:nth-child(2) span,.demo4 li:nth-child(3) span{width: 20px;height: 20px;border-bottom: 2px solid;}
.demo4 li:nth-child(2) span{border-right: 2px solid;transform: rotate(-45deg);}
.demo4 li:nth-child(3) span{border-left: 2px solid;transform: rotate(45deg);}
demo5 动画
transform-rotate
transform-scale
transform-translate
CSS3中-moz、-ms、-webkit和-o分别代表什么意思
1、-moz-:代表FireFox浏览器私有属性
2、-ms-:代表IE浏览器私有属性
3、-webkit-:代表safari、chrome浏览器私有属性
4、-o-:代表opera浏览器私有属性
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transform: rotate(360deg); 旋转
transform: scale(1.2); 放大缩小
transform: translate(0, -10px); 上下左右移动
demo6 阴影
Left
Top
Right
Bottom
Dark
Light
Inset
Border
Light
Heavy
box-shadow: x-shadow y-shadow blur spread color inset;
x-shadow 必需。 水平阴影的位置。允许负值。
y-shadow 必需。 垂直阴影的位置。允许负值。
blur 可选。 模糊距离。
spread 可选。 阴影的尺寸。
color 可选。 阴影的颜色。请参阅 CSS 颜色值。
inset 可选。 将外部阴影 (outset) 改为内部阴影。
demo7 渐变
Light Linear
Dark Linear
Light Radial
Dark Radial
none
background-image:linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image:linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
background-image:radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
background-image:radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
demo8 圆角
小角
大角
全角
桶角
border-radius: 3px;
border-radius: 8px;
border-radius: 50%;
border-radius: 20px/60px;
demo9 按钮
一个按钮
一个按钮
一个按钮
一个按钮
link:hover
link:active
link:visited
demo10 input焦点
link:hover
link:focus