CSS 遇见的属性

来源：互联网发布：12级地震知乎编辑：程序博客网时间：2024/05/01 19:05

contact_form ul {
width:750px;
list-style-type:none;//设置ul前面的序号是否显示
list-style-position:outside;
margin:0px;//与网页间距
padding:0px;//内容间距

}

.contact_form li{
padding:12px;
border-bottom:1px solid #eee;//在li上下加入实线并指定颜色
position:relative;//相对位置
}

.contact_form li:first-child, .contact_form li:last-child {//改变最上面与最下面的li的线的颜色
border-bottom:1px solid #777;
}

.contact_form input,textarea {
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;//边框阴影
border-radius:2px;//边框圆角
}

.contact_form input:focus, .contact_form textarea:focus {//点到input时改变css样式
background: #fff;
border:1px solid #555;
box-shadow: 0 0 3px #aaa;
}

button.submit:hover {
opacity:.85; //透明度
cursor: pointer; //鼠标放到该对象是显示的光标
}

.contact_form input:focus, .contact_form textarea:focus { //点中时改变长度
/* add this to the already existing style */
padding-right:70px;
}

.contact_form input, .contact_form textarea { //动画效果看起来是渐变的
/* add this to the already existing style */
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

 transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。

详细请见http://www.w3cplus.com/content/css3-transition

一、关于渐变（来自http://www.zhangxinxu.com/wordpress/?p=734）

渐变是一种应用于平面的视觉效果，可以从一种颜色逐渐地转变成另外一种颜色，故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。例如，您可以指定一个这么一个渐变：顶部的颜色是红色，中间的是蓝色，底部为黄色来作为div的背景色。渐变通过-webkit-gradient方法实现，可以用来代替图片URL。在webkit核心浏览器下(Safari4+, Chrome)，有两种类型的渐变，线性的和径向的。您还可以指定多个中间过渡色，此称之为color stops.

语法

-webkit-gradient(type, start_point, end_point, / stop...)-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)

参数

参数类型简要说明type渐变的类型，可以是线性渐变(linear)或是径向渐变(radial)start_point渐变图像中渐变的起始点end_point渐变图像中渐变的结束点stopcolor-stop()方法，指定渐变进程中特定的颜色inner_center内部中心点，径向渐变起始圆环inner_radius内部半径，径向渐变起始圆outer_center外部渐变结束圆的中心点outer_radius外部渐变结束圆的半径

创建线性渐变

这里展示的是最简单的线性渐变，由蓝色至白色的渐变。代码如下：

.linear{width:130px; height:130px; border:1px solid green; padding:10px; background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff)); -webkit-background-origin:padding; -webkit-background-clip:content;}<div class="linear"></div>

参见上面的background属性值，可以得到webkit核心浏览器下线性渐变的基本语法，如下：

-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值), [color-stop(位置偏移-小数,停靠颜色值),...],to(结束颜色值));

创建径向渐变

径向渐变也可以称为放射状渐变，常用来形成环状效果，晕状效果等。如下示例代码：

.radial{    display:block;     width:150px;     height:150px;     border:1px solid blue;     background-image:-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),         -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),         -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),         -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));}<div class="radial"></div>

指定过渡颜色点

1. 使用from()以及to()方法

body {   background: -webkit-gradient(linear, left top, left bottom, from(#ff0), color-stop(0.5, orange), to(rgb(255, 0, 0)));}

2. 不指定起始颜色与结束颜色

background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.40, #ff0), color-stop(0.5, orange), color-stop(0.60, rgb(255, 0, 0)));

3. 多个过渡点在同一位置

width:200px; height:120px; background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

创建背景重复渐变

CSS3中有个background-size属性，可以改变背景图片的大小，配合背景渐变属性可以实现重复的背景渐变，如下代码：

width:400px; height:150px; background:-webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffff00)); -webkit-background-size:0 20px;

渐变源文章来自张鑫旭-鑫空间-鑫生活点击打开链接

线性渐变在 Mozilla 下的应用

　　语法：

1
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

　　参数：其共有三个参数，第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。如图所示：

线性渐变在 Webkit 下的应用

　　语法：

1
2
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

　　参数：-webkit-gradient 是 webkit 引擎对渐变的实现参数，一共有五个。第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop 函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。如图所示：

0 0