CSS3 - 技术教程文章
使用css3属性border-image实现锯齿边框【代码】【图】
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.big_box{width: 400px;height: 260px;overflow: hidden;}.box{width: 400px;height: 200px;background: #0f0;border-bottom: 20px solid transparent;border-image: url(img/三角形.png);border-image-width: 20px;border-image-slice: 72;border-image-repe...
每月两个小小项目——CSS3简易照片墙【代码】【图】
目录 项目实现图片GIF ?项目思想 详细版（带大量解释） HTML代码 CSS代码 JS代码 简洁版（不带解释） HTML代码 CSS代码 JS代码项目实现图片GIF项目思想 把25张名为0.jpg~24.jpg的图片放入25个li标签中，按5行5列在ul中排列，之后通过Math.random设置每张图片的translate、rotate值，之后绑定点击事件 简洁版的是将每张图片还原到未设置translate、rotate值之前，然后将每张图片的src设置为点击图片地址，再将其定位到0，0位置并改变...
html5+css3(八)＜meta＞标记
<meta>标记 <meta>的主要作用，是提供网页的元信息。比如：指定网页的搜索关键字。 <meta>标记有两个属性：http-equiv和name。 1、http-equiv属性 功能：模拟http协议文件头信息，当信息从服务器端传到客户端时，告诉浏览器如何正确的显示网页内容。http-equiv属性一般要与content属性配合使用。Content属性指定信息的详细参数。 （1）设置网页的字符集 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> （...
html5+css3(六)颜色表示
html颜色表示 网页中的颜色有三种表示方法： 颜色单词：blue、green、red、yellow10进制表示：rgb(255,0,0)、rgb(0,255,0)、rgb(0,0,255)16进制表示：#FF0000(红)、#00FF00(绿)、#0000FF(蓝) 自界面中，所有的颜色都可以用三种光的不同波长混合而成。这三种光就是红光(red)、绿光(green)、蓝色(blue)。 在计算机中，每个基色，用8位二进制(2^8 = 256)，那么RGB共可以表示 256*256*256 = 1670万色。 用16进制表示颜色时：用2位十六...
html5+css3(七)锚点链接
锚点链接 含义：锚点链接，是在一个网页的不同区域进行跳转。锚点理解为“定义记号”。定义锚点(作个记号)：<a name = “锚点名称”></a>锚点名称的命名规则：可以包含字母、数字、下划线，但只能以字母开头。注意：<a>和</a>之间没有内容，换句话说：这个记号不是让我们看的，而是给链接用的。例如：<a name = “top2”></a>跳转到锚点(记号)： 语法：<a href = “文件名#锚点名称”>……</a>文件名：可有可无。如果是同一个网...
盒子阴影(CSS3)【代码】
盒子阴影(CSS3) 语法: box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；前两个属性是必须写的。其余的可以省略。外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset div {width: 200px;height: 200px;border: 10px solid red;/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); *//* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； ...
currentColor-CSS3超高校级好用CSS变量【代码】【图】
更新于2016-06-23 本文题目已从“currentColor-CSS3超高校级好用CSS关键字”变更为“currentColor-CSS3超高校级好用CSS变量”。 一、currentColor-真正大隐于市者 实际上，之前“SVG图标颜色文字般继承与填充”一文就简单介绍过currentColor, 后来有同事问此关键字，说没见过。我意识到，应该好好大家宣扬currentColor一番。 currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”，例如： .xxx { border: 1px so...
CSS3（二）【代码】【图】
6、2D转换转换也是CSS3的特性之一，可以实现元素的位移translate、旋转rotate、缩放scale等效果 所谓2D转换是指二维平面内进行转换 6.1 移动 transform:translate(x, y); /* 或者分开写 */ transform:translateX(n); transform:translateY(n);注意： translate 不会影响到其它元素的位置，不脱标，但是会覆盖其它元素，类似相对定位translate 百分比单位是相对自身的 translate(50%, 50%)切记：对行内标签没有效果 6.2 旋转 rota...
CSS3 笔记
CSS3 边框圆角 背景渐变文字更灵活的字体2D 转换 transform3D 转换 transform过渡 transitionCSS动画 @keyframes多列排布用户界面图片弹性盒子 flex多媒体查询 @media边框 border-radiusbox-shadowborder-image 圆角 border-radius 背景 不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张 background-imagebackground-sizebackground-origin =》content-box, padding-box,和 border-box区域内可以放置背景图像。...
重头学习html5+css3系列笔记（11）【代码】
网页favicon图标 截取png格式的图片在网站中将其转为.ico格式在head中引入<link rel="shortcut icon" href="favicon.ico">网站三大标签SEO优化 SEO(search Engine Optinization)意思是搜素引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名的方式 页面必须有三个标签TDK，即title description keyword来进行SEO优化 title 网站标题 title具有不可替代性，是我们网页的第一个重要的标签，是搜索引擎了解网页的...
CSS3选择器 :nth-child()的用法【代码】【图】
:nth-child() 一、偶数:nth-child(2n)二、奇数 :nth-child(2n-1)三、第6个开始的，直到最后:nth-child(n+6)四、选择第1个到第6个 :nth-child(-n+6)五、两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9):nth-last-child() 选择器 :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式。 提示：请参...
关于CSS3 box-sizing属性的详细案例讲解【代码】【图】
关于 CSS3的box-sizing 属性还可以参考W3school box-sizing属性的语法 和其他css属性一样，该属性有三个可取的值，具体语法： box-sizing: content-box|border-box|inherit;以下案例都是基于固定宽高的容器为例。 content-box（默认） box-sizing 属性的默认值就是 content-box。 实例：<ul class="box"><li class="box-item content-box"></li><li class="box-item border-box"></li><li class="box-item inherit"></li> </ul>.bo...
css3基础【代码】【图】
CSS3 基础入门(一) 说明 CSS3 中相对于CSS2来说，新增加了很多的内容，其中较为常用的包括下面几点： 选择器自定义字体(嵌入字体)和字体图标边框属性背景属性文本阴影和盒子阴影颜色属性渐变(线性渐变、径向渐变、重复渐变)过渡2d变换3d变换动画新的布局方案(flex 布局、多列布局、移动端布局、grid布局)在本篇文章当中，列出的都是一些css3当中新增加的较为常用并且兼容性较好的属性。选择器 在这里主要说的是两部分选择器： 属性...