您的位置:首页 > Web前端 > CSS

CSS杂记

2015-10-27 19:56 399 查看
1、transform:translate(移动):px水平垂直\scale(缩放):数字,水平垂直\rotate(旋转):角度(deg)  \skew(倾斜):角度 -----执行顺序左到右,无优先级

2、基于上一个属性,有了下一个属性transform-origin:变换的基准点。已左上角为为原点,可以是left\top\px\%\center这些单位

3、transition:变换时的过度效果(属性、时间、曲线、延时)

4、opacity:透明度 %。用于透明的属性还有rgba颜色,transparent背景色

5、box-shadow和text-shadow。前者有inset\outset选项,后者没有,多个阴影可用逗号隔开。

6、使用margin: 0 auto;居中,前提是该元素是块级元素。如canvas元素就是行内元素,需要设置display

7、box-sizing:  border-box:为元素指定的任何内边距和边框都将在已设定的的宽度和高度内进行绘制,通过从已设定的宽度和高度分别减去边框和内边距才能得打内容的宽度和高度。content-box: 宽度和高度分别运用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框。

8、background:url(http://index.png) no-repeat left top/200px 70px,  url(http://index2.png) no-repeat right bottom/150px 50px; 多重背景

css小技巧:http://www.html5cn.org/article-8881-1.html

2015-10-27-->

1、border-radius :还可以这样设置50px 50px 30px 20px / 50px 50px 30px 20px; 斜线前代表水平方向,斜线后代表垂直方向。这样设置8      个值也等同于:50px 50px 30px 20px。

2、outline : outline和border其实长的差不多,但是本质却不一样,outline不属于盒子模型,不参与文档流的计算,和box-shadow差不多。要提      到的是它的一个属性:outline-offset:偏移量,基于默认值,可为负数。

3、属性选择器是应注意大小写,仅有部分是不区分大小写的,如input的type。 可以用input[type="SUBMIT"]来选择<input type='submit'>

4、:not 、:nth-child、:nth-of-type等组合使用来解决多菜单之间的个性化,如:not(:last-child)来去掉最后一个的右边框等。

5、使用gradient、-webkit-background-clip、-webkit-text-fill-color制作渐变文字。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css