-
background-origin: border-box|padding-box|content-box; 定义背景的起点 border-box 以边框为起点 padding-box 以填充为起点 (默认值) content-box 以元素内容为起点查看全部
-
animation-fill-mode:none/forwards/backwards/both查看全部
-
来看一个断点解决图片自适应的例子。 <img src=”image.jpg” data-src-600px=”image-600px.jpg” data-src-800px=”image-800px.jpg” alt=”” /> 对应的CSS代码： @media (min-device-width:600px){ img[data-src-600px]{ content: attr(data-src-600px,url); } } @media (min-device-width:800px){ img[data-src-800px] { content:attr(data-src-800px查看全部
-
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;查看全部
-
@font-face { font-family: 字体名称; src: 字体文件在服务器上的相对或绝对路径; }查看全部
-
text-shadow: x y 模糊距离 颜色值; 模糊距离: 单位为px查看全部
-
meta表签查看全部
-
Responsive布局技巧 通过上面的介绍，大家对响应式设计有了一定的了解，但在实际制作中还是有一些布局技巧的： 在Responsive布局中，可以毫无保留的丢弃： 第一， 尽量少用无关紧要的div； 第二，不要使用内联元素（inline）； 第三，尽量少用JS或flash； 第四，丢弃没用的绝对定位和浮动样式； 第五，摒弃任何冗余结构和不使用100%设置。 有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？ 第一，使用HTML5 Doctype和相关指南； 第二，重置好你的样式（reset.css）； 第三，一个简单的有语义查看全部
-
background: linear-gradient(to 方向,颜色1,颜色2...); 方向 1.left 从右到左 数值为: 270deg 2.right 从左到右 数值为: 90deg 3.top 从下到上 数值为: 0 4.bottom 从上到下 数值为: 180deg 默认值 左上角 - 右下角 只需填写右下角名称即可 例如 linear-gradient(to bottom right,颜色1,颜色2...); 颜色1 为起始颜色 颜色2 为终点颜色 可以设置2个颜色以上的值,不少于2个查看全部
-
调用动画 animation-name 例如： div span { display: inline-block; width: 20px; height: 20px; background: orange; border-radius: 100%; animation-name:around; animation-duration: 10s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count:infinite; }查看全部
-
过渡延迟时间transition-delay 有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。 例如：a{ transition: background 0.8s ease-in,color 0.6s ease-out;}查看全部
-
实习上是一种缩写形式: 语法: border-image: 边框图像位置 切割图片的宽度 图片延伸方式; 边框图像位置: url(); 切割图片的宽度: 单位为像素,省略px也可以使用百分比,顺时针规律. 图片延伸方式 3种: 1.round (平铺) 2.repeat (重复) 3.stretch (拉伸)查看全部
-
CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间查看全部
-
改变原点位置：transform-origin transform-origin:left top; 改变原点位置到左上角查看全部
-
经测试，只有Firefox支持较好查看全部
举报
0/150
提交
取消