-
背景裁剪： border-box（边框） | padding-box（内边距） | content-box（内容区域）
background-origin: border-box;
background-clip: content-box;
查看全部 -
背景：
background: url（图片） left top（位置） / 250px 80px（大小） border-box content-box no-repeat,
查看全部 -
CSS3用:target切换背景图像
target是指 当前元素href通过id指向的元素
查看全部 -
设置多层渐变背景：
background-image: -webkit-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url(http://fs0.139js.com/file/s_jpg_857b081bjw1du3kveu19sj.jpg);
查看全部 -
在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素的初始状态样式； 第二，声明过渡元素最终状态样式，比如悬浮状态； 第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
查看全部 -
3D旋转导航
3d效果依赖于perspective：景深，定义了 3D 元素距视图的距离。 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
perspective: number | none; number：元素距离视图的距离，以像素计，数值越大，3d效果越明显。
查看全部 -
控制动画的播放状态：
正常时播放
span {
animation-play-state:running;
}
鼠标移动时暂停
div:hover span {
animation-play-state:paused;
}
查看全部 -
通过matrix()函数实现translate(100px,100px)的效果
matrix(1,0,0,1,100,100)
查看全部 -
scale(x,y)：缩放
scaleX(x)
scaleY(y)
查看全部 -
skew(x,y)：倾斜
skewX(x)
skewY(y)
查看全部 -
rotate：旋转，+ 顺时针，- 逆时针
查看全部 -
伪类和伪元素可用content属性为元素添加内容，img和input除外
content可添加的内容：
none：什么都不加
string：字符串
attr（标签属性）：添加标签的属性值
url：外部资源（图片、音频、视频等）
查看全部 -
不同设备分辨率设置：
1024px显屏
@media screen and (max-width : 1024px)
800px显屏
@media screen and (max-width : 800px)
640px显屏
@media screen and (max-width : 640px)
iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape)
iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait)
iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px)
bootstrap：
@media (max-width: 480px) { ... }
@media (max-width: 768px) { ... }
@media (min-width: 768px) and (max-width: 980px) { ... }
@media (min-width: 1200px) { .. }
查看全部 -
a为元素的水平伸缩量，1为原始大小；
b为纵向扭曲，0为不变；
c为横向扭曲，0不变；
d为垂直伸缩量，1为原始大小；
e为水平偏移量，0是初始位置；
f为垂直偏移量，0是初始位置查看全部 -
或者margin-top:-50%;margin-left:-50%;
查看全部
;){kind=link}
举报