@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...
border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。把这些基本的图形进行组合，还可以描绘成不同的图案，真的很棒。以下只是简单的几个举例，更多的...
box-sizing：content-box|border-box|inherit;默认值：content-box适用于：所有接受width和height的元素继承性：无 padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型。border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有bord...