乐于分享
好资源不私藏

css3属性笔记

学任何东西都要持之以恒,不能半途而废。

CSS3

边框

边框属性
border-radius
box-shadow
border-image
背景

背景属性
backgoroud-clip :content-box/padding-box/border-box 指定盒子的显示区域
background-origin :content-box/padding-box/border-box 指定背景定位的区域
background-size 规定背景图片的尺寸可以拉升收缩
background-image:url(bg_flower.gif),url(bg_flower_2.gif); //可以设置多幅背景图片了
文本效果

文字属性
text-shaow :水平阴影 垂直阴影 模糊距离阴影颜色;
word-warp: break-word 强制对不可分割的单词打断换行
定义字体
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf’),
url(‘Sansation_Bold.eot’); /* IE9+ */
font-weight:bold;
}
2D转换

transform属性的方法
translate(left,top) 将当前元素从当前位置移动
rotate(30deg) 怨怒是顺时针旋转指定角度
scale(2//宽度倍数, 4//高度倍数);将元素的大小倍数改变
skew(30deg//x轴旋转角度 ,60deg//y轴旋转角度);
matrix(n,n,n,n,n,n); 将所有变换连写
3D转换

transform属性的方法
rotateX(); 绕x轴旋转的角度
rotateY();绕y轴旋转的角度
rotateZ();绕z轴旋转的角度
transform-style 的值
flat 子元素在2D中显示
preserve-3d 子元素3D中显示
transform-origin:10% 10%; 确定旋转的基点
perspective:500; 设定观察的位置
过渡属性

transition-property : width; 规定过渡属性的名称
transition-duation: 1s; 过渡属性所需要花费的时间
transition-timing-function: linear//线性|ease//慢-快-慢(默认)|ease-in//慢-快|ease-out//快-慢|ease-in-out //慢快慢};
transition-delay: 0s; 过渡效果从什么时候开始
CSS3动画

@keyframes规则 定义样式的变化
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
捆绑到元素上
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
根据动画进程变化效果
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
设置动画属性
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
多列

多列属性
colum-count : 3; 将元素中的文本分成三列
column-gap : 40px; 规定列之间的间隔
column-rule: 3px outset #ff0000 设置列之间的宽度样式和颜色
用户界面

用户可调整宽高
div
{
resize:both;
overflow:auto;
}
设置盒子大小的计算模式
box-sizing : border-box; width = padding + border + content
box-sizing: content-box; width = content
设置元素的外边框
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

 

未经允许不得转载:9i资源网 » css3属性笔记

评论 抢沙发

评论前必须登录!

立即登录   注册

×
订阅图标按钮