css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动trans...
css3 2D变形（transform）移动、缩放、旋转、倾斜
一. translate(x,y) 或者translateX(x)或者translateY(y)注意点：translateX(x)和translateY(y)大写X和Y；只写一个值，默认y=0。<body> <div></div></body> ...
【20190328】CSS-transform-origin（变形原点）解析
因为搜遍网上也没有一篇文章把transform-origin讲得很清楚的，所以自己总结了一下transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用（注意元素位移translate()始终是依元素中心点进行位移）；不设置的情...
CSS transform(变形)和transform-origin(变形原点)
transform(变形)和transform-origin(变形原点)的说明：目前这两个属性得到了除去ie以外各个主流浏览器webkit，firefox，opera的支持，属性名分别为-webkit-transform，-moz-transform，-o-transform;1、改变元素基点tra...
10个CSS简写/优化技巧-摘自网友
10个CSS简写/优化技巧23来源/作者：未知类别：前端开发字体大小：大|中|小背景颜色：蓝|白|灰? ?CSS简写就是指将多行的CSS属性简写成一行，又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小，优化网站整体性能，更加容易阅读。下面介绍常见的CSS简写规则...
css实现三角箭头
像下面的向右三角箭头，只有纯css不需要图片就可以实现了。width:0px;height:0px;border-width:0px 16px 20px 16px; border-style:solid;border-color: transparent transparent #FFF tran...
8款超酷体验的jQuery/CSS3应用插件
1、jQuery/CSS3实现Android Dock菜单效果这是一款基于jQuery和CSS3的Android Dock菜单效果，点击底部的按钮即可让应用图标浮动上来，并且按钮也出现3D的翻转效果。jQuery是一款应用十分广泛的javascript类库，很多前端开发者都十分青睐jQuery框架。...
css3- border
css3-border1.border-color2.border-image3.border-radius ( none | <length>{1,4} [ / <length>{1,4} ]? )第一个值是水平半径。如果第二个值省略，则它等于第一个值，这时这个角就是一个...
关于css3的rgba
在rgba之前，我们应该知道rgb。它就是红色R+绿色G+蓝色B。那rgba是什么？简单的说就是在rgb的基础之上加上一个通道alpha。他的语法如下：r 红色值。正整数(0~255) | 百分数g 绿色值。正整数 (0~255)| 百分数b 蓝色值。正整数 (0~255)| 百分数a...
css新笔记
这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。border-radius很多开发者估计都没有正确认识这个border-radius，因为基本上很多人都是这么用的：.box { border-radius: 4px;}稍微高端一点的是这样的：.box { bord...
非常有用的css使用总结
积小流以成江海，很多东西你不总结就不是你的东西常用css总结：/*设置字体*/ @font-face { font-family: 'myFont'; src: url('../font/myFont.eot'); src: url('../font/...
css实现超出部分用...代替
如果是一行的话css为white-space: nowrap； 保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。overflow: hidden； 隐藏超出单元格的部分。text-overflow: ellipsis； 将被隐藏的那部分用省略号代替。若是想要超出指定的行数再显示......
深入理解CSS绝对定位absolute
前面的话前面已经介绍了定位的偏移和层叠，例子中大量的应用了绝对定位。因为相较于相对定位和固定定位，绝对定位在实际中应用频率更高、应用场景更广泛。本文将介绍使用绝对定位时的具体细节定义当元素绝对定位时，会从文档流中完全删除。元素位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置...
找出html中的图片、包括css中的图片，读出图片数据转换为base64数据
<?phpecho ">> 图片的地址，css里面的要打单引号\r\n";echo ">> 相同的图片，使用css实现图片地址只出现一次，有助于减小文件体积\r\n";echo ">> 因为凡是出现图片地址的地方，都会被转换成base64字符串\r\n";$...
前端学习 -- Css -- 行间距
在CSS并没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高来间接的设置行间距，行高越大行间距越大。使用line-height来设置行高 。行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示。...
CSS高度坍塌问题的原因以及解决办法
原因:在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。<!DOCT...
CSS------如何让ul中的li分为两列甚至多列
转载：http://blog.sina.com.cn/s/blog_7f13f92a0100rkfg.html只需要复制ul和li中的style样式即可如果需要自定义多少列，只需要修改li中的with属性即可<ul style="overflow:hidden;zoom:" >@fore...
前端学习——css实用技术
一，css控制文本样式文本相关的css属性有很多，包括：color;font-size;font-weight;text-transform(大小写uppercase等);text-decoration(下划线等)；letter-spacing;word-spacing;text-shadow(cs...
前端学习 -- Css -- 盒子模式
框模型：CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。一个盒子我们会分成几个部分：– 内容区(content)上图的elem...
前端学习---css基本知识
css基本知识我们先看一个小例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head&...