<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title></title><style>body {margin: 0;}.content-box {height: 100vh;display: grid;grid-template-columns: repeat(5, 1fr);grid-template-rows: repeat(5, 1fr);grid-gap: 20px;}.box:nth-child(1) {grid-column: 2 / 5;}.box:nth-c...
1，transition属性个人非常习惯用transition过度属性，简单易用。大家称他为animation简化版本。例如：.contain{width: 392px; position: relative; bottom: -20px; opacity: 0;}.contain.on{ bottom: 0; opacity: 1; transition:all 500ms ease-out 2s; -webkit-animation:all 500ms ease-out 2s;-moz-animation:all 500ms ease-out 2s;-ms-animation:all 500ms ease-out 2s;-o-animation:all 500ms ease-out 2s;}当符合某种条件...
一、线性渐变在CSS中部分属性需要添加浏览器前缀-moz-:表示火狐内核浏览器-webkit-:表示谷歌内核浏览器-ms-:表示IE内核浏览器-o-:表示欧朋(opera)内核浏览器<style> .div1{background-image:linear-gradient(to top,red,green);width:400px;height:180px;} .div2{background-image:linear-gradient(45deg,red,green);width:400px;height:180px;} .div3{background-image:-webkit-repeating-linear-gradient(-45deg,red,green,red 2...
IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题，而FF、Chrome原生的浏览器支持是的优雅的圆角感觉较好，如何解决这个问题呢？ 一种比较传统的方案是放弃CSS3，使用背景图，但是这种方式也会有诸多问题，对页面结构改动较大，需要对自适应大小进行控制等，成本较高。 另外一种是百度了一下，发现有个开源的插件可以解决此问题：http://css3pie.com/使用方法很简单，下载了之后直接引用.htc文件即可。 ...
这里讨论的都是关于边框属性border的极致应用，这些应用虽说有些剑走偏门，但在一些特殊的场合，可能还是会用得上的，如果你对HTML代码有洁癖，有切肤之痛，并且认为冗余的标签影响到你的视觉神经，那么你可以权当一种业余欣赏。作者：冰极峰博客地址：http://www.cnblogs.com/binyong这世界太疯狂，Border属性也搞模仿秀！这里讨论的都是关于边框属性border的极致应用，这些应用虽说有些剑走偏门，但在一些特殊的场合，可能还是会...
1、盒子模型（1）border属性和padding属性会影响盒子的实际大小：<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script></script><style>div{width: 200px;height: 200px;background-color: black;border: 30px solid red;}</style></head><body><div></div></body> </html> <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script></script><style>div{width: 200px;height: 200px;ba...
12 <div id="animateTest"style="-webkit-transform: perspective(400px) rotateY(40deg);">Css12<div id="animateTest"style="-webkit-transform: rotateY(40deg) perspective(400px);">如果大家不清楚，请听我娓娓道来。CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持，IE10支持。只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单：只能选择透视方式，...
写在前面的话： 由于CSS3标准还未完全订下来，所以各种内核的浏览器都有自己的标准，为了不使属性混淆，所以各家在各家自标准前加了一个前缀，如：-moz-主要是firefox火狐 -webikt-主要是chrome谷歌 -o-主要是用于苹果浏览器 一.box-shadow（阴影效果）使用：box-shadow：20px 10px 0 #000；-moz-box-shadow：20px 10px 0 #000；-webkit-box-shadow：20px 10px 0 #000；支持：FF3.5，Safari4，Chrome3二.border-colors（为边...
首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像，这里我记录的是利用这个content属性来在项目前插入项目编号，同时可以利用content属性在字符串两边加上括号。1.在多个标题前加上连续编号<style type="text/css"> h1:before{ content:counter(mycounter); }</style> 2.在项目编号中追加文字h1:before{ content:‘第‘counter(mycounter)‘章‘;} 3.指定编号的样式例如：使得编号后面...
文字阴影text-shadow：h-shadow/v-shadow h-shadow 水平阴影，允许负值，正数时阴影在右，负数时阴影在左v-shadow 垂直阴影，允许负值，正数时阴影在底部，负数时阴影在上面 水平和垂直阴影必须要写 blur 模糊距离，只能是正数color 阴影颜色 盒子阴影box-shadow 默认时外阴影（六个属性值，前四个是value,color，inset） 1）阴影离开盒子时的横向距离2）阴影离开盒子时的纵向距离3）阴影的模糊半...
以前还没有注意过css的一些属性，近期发现有一些样式很好用，现在整理一遍。CSS3 动画属性@keyframes : 规定动画可以通过keyframes 改变一个块的样式当然这是要配合animation属性来结合的@keyframes mymove（mymove必须定义动画的名称在） { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} }@-moz-keyframes mymove /* Firefox */ { 0% {top:0px; background:red; width:100p...
一、CSS1&2中的文本属性(W3C标准)text-indentCSS1检索或设置对象中的文本的缩进letter-spacingCSS1检索或设置对象中的文字之间的间隔word-spacingCSS1检索或设置对象中的单词之间插入的空格数。vertical-alignCSS1/CSS2设置或检索对象内容的垂直对其方式white-spaceCSS1设置或检索对象内空格的处理方式directionCSS2检索或设置文本流的方向unicode-bidiCSS2用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用...
下面我们从3个方面开始介绍： 1、scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。Css代码 transform:scale(2,2.5); 2、scaleX(<number>) 元素只在X轴（水平方向）缩放元素。 默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点Css代码 transform:scaleX(2); 3、scaleY(<number>) 元...
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5<title>纯css3样式属性制作各种图形图标</title> 6</head> 7<style> 8 9/*正方形*/ 10#square{width:100px;height:100px;background:red;} 11/*长方形*/ 12...
在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个...