CSS基础详解3

来源：互联网发布：linq实战源码编辑：程序博客网时间：2024/06/07 22:16

边框

1.border属性配置围绕元素的边框。边框默认设为0，且不显示。

属性名称
说明和常用值border简写方式同时配置元素的border-width,border-style和border-color；不同属性值以空格分隔border-top顶部边框；border-width,border-style和border-color的值以空格分隔border-right右侧边框；border-width,border-style和border-color的值以空格分隔border-bottom底部边框；border-width,border-style和border-color的值以空格分隔border-left左侧边框；border-width,border-style和border-color的值以空格分隔border-width边框粗细；像素值或表达粗细的英文词(thin，medium，thick)border-style边框样式；包括none, inset, outset, double, groove, ridge, solid, dashed, dottedborder-color边框颜色；有效颜色值

CSS3圆角

1.CSS3引入border-radius属性，可用来创建圆角。圆角编码需三个不同样式声明：

-webkit-border-radius(用于WebKit浏览器)
-moz-border-radius(用于Gecko浏览器)
border-radius(W3C草案语法)

如果想显示一个可见的边框，先配置border属性，再把圆角属性设为20px以下获得最佳效果。

border:1px solid #000000;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;

居中整个网页内容

关键在于div元素来包含整个网页内容。然后配置这个容器的CSS样式规则。将width设置为合适的值(960-1002px)，将margin-left和margin-right属性设为auto，浏览器自动分配左右边距。

<body>   <div id="content">    ......网页内容......    </div></body>#content{     width:980px;     margin-left:auto;     margin-right:auto;}

阴影效果

1.box-shadow属性为框模型创建阴影效果，WebKit和Gecko浏览器渲染引擎不同，需编码三个样式，每个声明提供4个值。

代表阴影水平偏移的像素值。正数在右侧显示阴影，负数在左侧显示阴影。
代表阴影垂直偏移的像素值。正数在下方显示阴影，负数在上方显示阴影。
代表模糊半径的像素值。值越大越模糊。值0配置锐利的阴影。
有效颜色值。例如：

-webkit-box-shadow: 5px 5px 5px #828282;-moz-box-shadow: 5px 5px 5px #828282;box-shadow: 5px 5px 5px #828282;

同样，text-shadow文本阴影属性也要求4个值(IE9不支持)。例如：

text-shadow: 3px 3px 3px #666;

2.opacity属性配置背景颜色的透明度。opacity的值从0(完全透明)到1(完全不透明)。IE9之前支持filter属性，配置1(透明)到100(不透明)之间的opacity级别。例如：

filter: alpha(opacity=60);

CSS3 RGBA颜色

1.RGBA颜色不是使用十六进制，而是使用十进制颜色值。红绿蓝必须是0到255的十进制值。alpha值必须在0(透明)到1(不透明)。

2.不是所有的浏览器都支持RGBA颜色，所以要配置color两次，较新浏览器会按照编码顺序应用。

color:#ffffff;color:rgba(255,255,255,0.8);

CSS3渐变

1.使用CSS3渐变时注意渐进式增强，要配置一个后备的background-color属性或background-image属性。

2.编码4个样式声明来配置渐变颜色：

-webkit-gradient(用于Webkit浏览器)
-moz-linear-gradient(用于Gecko浏览器)
filter(用于Internet Explorer)
linear-gradient(W3C草案语法)

线性渐变(linear-gradient)和放射性渐变(radial-gradient)使用不同的函数。

background-color:#8fa5ce;background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#8fa5ce));background-image:-moz-linear-gradient(top,#ffffff,#8fa5ce);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#ff8fa5ce);background-image:linear-gradient(#ffffff,#8fa5ce);

0 0