分类目录归档:CSS3

3月四号css3学习笔记

按钮demo    盒子模型背景动画      css3笔记2

今天呆了一下午图书馆,头晕脑胀的。

css3按钮有一处一直看不到,有时间再看吧。

 

 

渐变

background:linear-gradient( to 渐变方向,color begin,color end)

::before   after 伪元素

定义第三方字体—–

@font-face{

font-family:定义字体名称;
src:url();
}

元素2d转换

transform: translate(10px,5px){以左上建立坐标系移动}
rotate(45deg){旋转,负值表示逆时针,deg(角度)}

scale(2,3){放大倍数,w,h}

transform:skew(<angle> [,<angle>]);

包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
3d转换

rotate(x)
rotate(y)
过渡(transition)效果

动画
选择器绑定
@keyframes myx{}
在div块里规定
div{

animation:myx 动画持续时长/s
}

css3用户调整尺寸大小rsize:both

overflow:auto

响应式图片
img{

max-width:100%;
height:auto;
}

css3盒模型笔记

盒模型

—–css3笔记——-
css3盒阴影:
box-shadow: h-shadow v-shadow blur spread color inset;
水平阴影 垂直阴影 模糊距离 阴影尺寸 颜色 外阴影转内

(可负值);

border-image(图形边框)

border-image:source slice width outset repeat(平铺)/round(铺满)/stretched(拉伸)
路径 边框内移 宽度 边框外溢 边框放置方式

transform:rotate(0deg) 盒子倒转 顺正逆负

圆角border-radius:上左 上右 下右 下左

背景{
background-image:url(),url();
background-position:
background-repeat:repeat/no-repeat
background-size
background-origin:border-box/padding-box/content-box
background-clip(剪裁,从何剪裁):padding-box/content-box

}