css3 box-sizing属性box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。content-box，border和padding不计算入width和height之内，浏览器默认也是这样padding-box，padding计算入width内border-box，border和padding计算入width之内，其实就是怪异模式了~ ie8+浏览器支持content-box和border-box；ff则支持全部三个值。 案例 #a1{width:500px;padding: 10px;border:1px solid #ee240f;}问...
.ribbon {background: #45c9c8;position: absolute;width: 75px;height: 25px;line-height: 25px;top: -4px;left: -11px;font-size: 14px;color: #fff;text-align: center;font-style: normal;z-index: 1;&:after{content: "";position: absolute;width: 0;height: 0;border-left: 12px solid transparent;border-top: 5px solid #329c9b;top: 25px;left: 0px;z-index: 0;}&:before{content: "";position: absolute;right: -10px;f...
@font-face语法规则@font-face {font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}说明：YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；format：此值指...
做项目经常会遇到图片列表展示，图片一般是用户从后台上传的，上传的图片尺寸千差万别。如果前端不控制图片大小，整个排版就会很乱，如果给定长宽，图片又会变形，用背景图片来处理有特别麻烦。这个问题一直苦恼了我好久，最近终于找到解决办法了。css有一个object-fit属性，用来指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框，效果类似于微信小程序里image标签的mode属性。1.首先是一个html结构，然后给定图片高宽...
研究了下css3中的 transform变换属性中的3D属性效果和看到的一篇好文章了解到了3D的学习;好文章地址:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 下面只是自己能读懂自己写的代码例子:<style>#box{-webkit-perspective:800px;//定义3D场景大小-webkit-transform-origin:50% 50%;//定义3D场景的中心点perspective:800px;transform-origin:50% 50%;}.box{width:200px;height:20...
(一)网页内容类标题: title摘要: summary箭头： arrow商标： label网站标志： logo转角/圆角： corner横幅广告： banner子菜单： subMenu搜索： search搜索框： searchBox登录： login登录条：loginbar工具条： toolbar下拉： drop标签页： tab当前的： current列表： list滚动： scroll服务： service提示信息： msg热点：hot新闻： news小技巧： tips下载： download栏目标题： title热点： hot加入： joinus注册： regsiter指南...
《CSS3基本选择器》一、通配符选择器（＊）*{marigin:0;padding:0;}二、元素选择器(E)li {background-color: grey;color: orange;}三、类选择器（.className）四、id选择器（#ID）#first {background: lime;color:#000;}#last {background:#000;color: lime;}五、后代选择器（ＥＦ）.demo li {color: blue;}六、子元素选择器(E>F)ul > li {background: green;color: yellow;}七、相邻兄弟元素选择器(E + F)li + li {background: gr...
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一.旋转 rotate用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。二.缩放 scale用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);参数表示缩放倍数；一个参数时：表示水平和垂直同时缩放该倍率两个...
【box-shadow属性】：是一个css3属性，用于创建阴影效果。语法：box-shadow:offset-x offset-y blur spresd color position;属性值说明：offset-x offset-y指的是元素水平偏移量；blur：表示阴影的模糊半径；spread：阴影尺寸（从元素到阴影的距离），正值会在元素的各个方向按指定的数值延伸阴影，负值会使阴影收缩的比本身元素的尺寸还小。color：阴影的颜色值；position：可选，表示阴影的位置，默认值是外部阴影，关键字inset指...
问题最近在使用background-image属性来实现CSS3的逐帧动画时，碰到了个问题。在chrome浏览器上，background-image属性是支持css3动画的，但是到了firefox上，就完全看不到任何动画。原因通过网上查找，才发现W3C标准中明确background-image属性是不支持动画的，所以firefox由于遵循了该标准，并没有给该属性支持动画。解决过程解决方法是使用backgrond-position属性，该属性在W3C标准中是支持动画的，因此所有浏览器应该是可以支持...
圆角效果： border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 阴影： box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式(inset)]; 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径：此参数可选，其值可以是正负值，如果...
CSS2.1中有5个background属性可以用来控制元素的背景。这5个属性是：background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position为了更好的驾驭背景图片，CSS3添加了3个新的background相关属性，以及一系列的相关属性值。不过在我们与这几个新属性亲密接触之前需要知道3个重要的盒子。
三个盒子
假设现在有个容器，容器里面有些内容，虽然我们看不见，但是这些内容的外面是有一个盒子的，这个盒子...
<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>慕课七夕主题</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><style type="text/css">* {padding: 0;margin: 0;}ul,li {list-style-type: none;}#content {width: 100%;height: 100%;/* top: 20%;left: 20%; */overflow: hidden;position: absolute;}.content-wrap {position: rela...
CSS3中和动画有关的属性有三个 transform、 transition 和 animation。下面来一一说明: transform 从字面来看transform的释义为改变，使…变形；转换 。这里我们就可以理解为变形。那都能怎么变呢？none 表示不进行变换；rotate 旋转 transform:rotate(20deg) 旋转角度可以为负数。需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值（50px 70px）。skew 扭曲 tra...
什么是属性前缀
为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。
例如：transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */使用插件来帮助我们进行前缀的自动添加，会大大提升我们的开发效率，提供编码效率。
此次是关于如何通过po...
CSS3的icon属性用于为创作者提供了将元素设置为图标等价物的能力。