css3

圆角： border-radius阴影： box-shadow边框图片： border-image盒子内减： box-sizing:border-box; 圆角：border-radius:像素/百分比 一个值设置的是盒子的四个角的水平和垂直半径 每个角都可以单独进行设置，取值顺序是左上 右上 右下…

大家都知道现在各个浏览器都支持css3的自定义字体(@font-face)，包括ie6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，本文将详细讲解这种用法 为什么要将icon做成字体？ 在很多网站项目中，我们常常会用到各种透明小图标…

transform的作用 transform 属性向元素应用 2d 或 3d 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。(w3cschool) transform的兼容性 transform的兼容性还是比较乐观的。IE9以下不兼容，IE9支持代替的-ms-transform属性不过只支持…

语法 word-wrap: normal|break-word;所有主流浏览器都支持 word-wrap 属性。 https://home.cnblogs.com/set/account/ 不写word-wrap:break-word;的效果 加上word-wrap:break-word;的效果 以…

使用css3来实现loading动画特效的代码案例分享 代码如下： css3 loading等待加载代码 – 何问起 @keyframes move { from { transform: translate(0,50%); } to { transform: translate(0,850%); …

这篇文章主要介绍了使用css3制作一个简单的进度条(demo)的相关资料,需要的朋友可以参考下 这里只是一个小demo,一个用CSS3写的进度条。 如图所示： 具体代码如下： new document .process-bar{ width:100px; display:inline-block; …

实现如图所示的点点点loading效果： 一：CSS3 animation实现代码 html代码： 提交订单中… css代码： .ani_dot { font-family: simsun; }:root .ani_dot { /* 这里使用Hack是因为IE6~IE8浏览器下， vertica…

box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果，当然也就可以实现点点点的loading效果了。 实现原理 html代码，首先需要写如下html代码以及class类名： 订单提交中 css代码 .dotting { display: inline-block…

整体思路是：通过裁切（clip）产生两个半圆展示出静态的进度条，而后通过旋转（rotate）角度的变化产生动态效果。 先来回顾两个基础知识点 （1）css的一个不常见的属性： clip: rect(top, right, bottom, left); 这个属性规定了一个裁切的矩形，其中top和bot…