效果图：代码：background:url("images/logo.png")no-repeat;-webkit-mask:url("images/mask.png");mask.png中黑色代表是不透明的（alpha：1）,其他部分为透明的（alpha：0），将它盖在背景图上，注意：背景图对应mask.png中透明的位置也会变成透明，留下非透明的形状，即背景图的可见形状与mask.pn...

利用:before和:after，加上绝对定位的性质，可以形成一个矩形，这个时候结合CSS3的倾斜属性skew和旋转属性rote。就可以形成一个有旋转角度的平行四边形，这个时候再和原来的矩形重叠，则可产生翘边效果。效果：代码：

多个阴影重叠，就是正常阴影+曲线阴影正常情况下，有个矩形有正常的阴影，作为主投影，这时候再定义一个有一定弧度圆角的圆角矩形，然后放在正常矩形的下面，并露出一点点底部有弧度的阴影，这样的话就可以形成曲线投影的效果。效果：代码：

设置border-color、background-color等颜色的时候，可以使用currentColor[与当前元素的字体颜色相同]来简化css。.div{color:rgba(0,0,0,.85);font-weight:500;text-align:left;padding:20px;border:solid1pxcurrentColor;}05.灰色滤镜做样式的di...

03.2个a标签做90度旋转bug定义了一个动画效果如下(sass代码)：@keyframesofficial-featured_rotate{10%,50%{transform:rotateY(90deg);}60%,100%{transform:rotateY(0deg);}}&-rotate{position:absolute;width:rem(350/2);he...

正常处理文字上下居中的手段是让元素height和line-height相等，但是安卓环境下当字体大小<14px/0.7rem的时候会出现居中失效的情况。解决方法：判断系统环境（安卓/IOS）分别作微调；font-size、height、width全部放大为2倍，利用transform进行缩放height:1rem;width:2rem;font-size:0.5rem;变成：height:...

在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及MacOSX系统的Safari浏览器)，当我们使用3Dtransform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的3D视角进行渲染。例如下面的场景，图中红框里面的模块，...

讲下css的使用CSS：负责页面的美化和布局的控制1.概念:CascadingStyleSheets层叠样式表层叠:多个样式可以作用在同一个html的标签上，同时生效。4.CSS语法：格式:选择器{属性名1:属性值1；属性名2:属性值2;…}选择器:筛选具有相似特征的元素。注意：每一对属性需要使用;隔开，最后一对可以不加。(一般都加)5.选择器:筛选具有相似特征的元素。分类：1.基础选择器...

一：CSS的描述1、CSS通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)2、图片的外形(高宽、边框样式、边距等)以及版面的布局等外观显示样式3、CSS可以是HTML页面更好看，CSS色系的搭配可以让用户更舒服4、CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构二:CSS样式使用规则1、使用HTML时，需要遵从一定的规范，CSS也是如此有一定...

1、边框和尺寸1、边框和尺寸：border、width、height......2、样式取值：solid实线，none无边，double双线等2、布局float、clear1、通常默认的排版方式，将页面中的元素从上到下的方式进行排序2、而实际开发中，需要左右方式进行排版，就需要使用浮动选择器3、由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响如避免影响，需要使用clea...