CSS基础详解3

最新推荐文章于 2014-12-16 13:46:54 发布

三爷麋了鹿

最新推荐文章于 2014-12-16 13:46:54 发布

阅读量324

点赞数

分类专栏： html5学习

本文链接：https://blog.csdn.net/u800820/article/details/40385273

版权

html5学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

边框

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, dotted
border-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);