汉堡请不要欺负面条

利用 drop-shadow 对元素的部分内容添加单重及多重阴影 <div class="setCss"> <div class="round"></div></div>.setCss { width: 300px; height: 300px; background: #000; padding: 32px}.round{ --colorA: #fff; position: relative; margin: aut

一.steps介绍steps()是一个timing function（animation中），允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。Steps(&lt;number_of_steps&gt;，&lt;direction&gt;)两个参数：第一个参数是一个正值，指定动画分割的段数。第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点...

1.使用linear-gradient来做小波浪线①原理:linear-gradient(45deg, red, transparent 45%)  是个渐变②.wave{ width: 20rem; height: 8px; background-size: 16px 16px; background-repeat: repeat-x;

一.注意点1.HTML5中rel属性的prefetch预加载功能 :rel='stylesheet prefetch'   2.Google字体库载入（在family加入你要的字体）&lt;link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Bad+Script|Gruppo|Kumar+One+...

一.css3filter(滤镜)属性(1).语法filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();brightness(%) 亮度(值越

今天突然看到这个will-change 觉得好新鲜，就百度一看，才知道人家早就出来（我out了），只是现在各个浏览器还不怎么兼容，为了满足我的好奇心，就来了解下呗。如果你已经试验和利用过这些CSS3的属性，你可能碰到类似CPU、GPU和硬件加速等术语。让我们快速的掌握这些术语：   ①CPU即中央处理器，它的功能主要是解释计算机指令以及处理计算机软件中的数据,也被称为主板。   ②GP

一、变量是个好东西在任何语言中，变量的有一点作用都是一样的，那就是可以降低维护成本，附带还有更高性能，文件更高压缩率的好处。随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行，CSS工作组迅速跟进CSS变量的规范制定，并且，很多浏览器已经跟进，目前，在部分项目中已经可以直接使用了。Chrome/Firefox/Safari浏览器都是绿油油的，兼容性大大超出我的预期，于

一.box-reflect语法box-reflect：none | ? ? = above | below | left | right = | = none | | | | | 由于此属性并不是W3C标准属性，在具体使用之时，还是需要添加浏览器的私有属性，根据浏览器的兼容性，使用box-reflect时需要添加-webkit和前缀：

1.calc()用于动态计算长度值。    width: calc(100% - 200px);    width: -webkit-calc(100% - 200px);    width: -moz-calc(100% - 200px);浏览器支持IE9+、FF4.0+、Chrome19+、Safari6+

一.转换(平移/缩放)1.transform:对元素进行旋转、缩放、移动或倾斜。transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是css 的图形变形工具。变形的顺序是从左到右依次进行①skew(x-angle,y-angle)

一,box-shadowbox-shadow: h-shadow v-shadow blur spread color inset;水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 阴影的颜色 将外部阴影 (outset) 改为内部阴影。注意：png图片内的边缘是没有阴影，只有图片的边缘有（1）.内阴影（2）.曲线阴影原理分析：曲线阴影是有三个图

1.htmlCSS3美化单选按钮和复选按钮代码.demo{width:360px;margin:50px auto 10px auto;padding:10px;}.demo img{width:90%}.demo h3{font-size:1.5em;line-height:1.9em}.col{margin-top:20px}.col h4{height:40

纯CSS让IE7,IE8浏览器实现正圆角效果 /*主要CSS*/ * { padding: 0; margin: 0; } .box { width: 150px; height: 150px; line-height: 150px; position: relative; overflow: hidden; margin:100px auto; } .radius { positio

-webkit-gradient(<type>, <x1 y1>, <x2 y2> , from(颜色1) ,to(颜色2))渐变类型type:linear（线性渐变）或者radial（径向渐变）渐变起点;x1,y1(可以用left，top等表示)渐变终点:x2,y2(可以用left，bottom等表示)background: -webkit- gradient(linear, left top, left bottom, #bccfe3, #d2dded);

css3中transition过渡和animation动画的区别 animation 多两个参数，循环和动画的方式transition不能自行触发，通过hover等动作或结合JS进行触发。anmiation可以自行运行。transition可控性较弱，只能指定起始状态和结束状态，而animation可以定义多个关键帧。 动画在运行结束之后，需要回到初始状态 transition的作