CSS教程之CSS新特征:圆角边框多栏Gird结构背景设置
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。破洛洛文章简介：到如今为止,只要一些已事情的CSS3特征.
到如今为止，只要一些已事情的特征，他们中的一些以下:
圆角
从web2.0入手下手，入手下手盛行利用圆角，假如你不利用圆角，你的网站大概不会被列进web2.0网站。次要成绩是，你最少必要4个图片（每一个角一个）和一些JS或庞大的层来完成圆角。
这些将成为已往了！两行就充足了。让我给你个例子：
HTML:
Thisiseasy
css代码:
.round{
background-color:#666;
color:#fff;
line-height:20px;
width:200px;
padding:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
这里是下面的截屏:
那末，有甚么新器材？实践上CSS3的声明是border-radius。到今朝为止，这个特征还没有断定，浩瀚扫瞄器临盆商经由过程前缀撑持该属性。Firefox利用-moz-，Safari利用-webkit-
这里一样撑持你选择哪一个角利用圆角，这能够经由过程利用“TopLeftTopRightBottomRightBottomLeft”完成。示例：
#-moz-border-radius-topleft/-webkit-border-top-left-radius
#-moz-border-radius-topright/-webkit-border-top-right-radius
假如大概你想要利用圆角功效，可是想要别的扫瞄器体现一样的效果，看这里。
边框
别的一个使人镇静的CSS3新的border特征是撑持border-image。如许你就可以为每个自力的角和边框界说一个图片。
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
利用的图片能够是如许的：
border的另外一个十分帮的特征是利用gradientcolors，而不是用图片：
CSS代码：
.bordercolor{
border:8pxsolid#000;
-moz-border-bottom-colors:#0fff09#00fff2#00ff00#ffd#ff0#aaa#bbb#ccc;
-moz-border-top-colors:#0fff09#00fff2#00ff00#ffd#ff0#aaa#bbb#ccc;
-moz-border-left-colors:#0fff09#00fff2#00ff00#ffd#ff0#aaa#bbb#ccc;
-moz-border-right-colors:#0fff09#00fff2#00ff00#ffd#ff0#aaa#bbb#ccc;
width:200px;}
今朝只要Firefox3撑持这个特征，以是在Safari和Opera没法利用。
破洛洛文章简介：到如今为止,只要一些已事情的CSS3特征.
多栏
该特征使生存加倍简单，呵呵。这个新特征同意网页计划师将笔墨填进栏中。这能够经由过程两种办法完成，界说各栏的宽度，大概是界说栏数。
多栏结构今朝只撑持Mozilla中心的扫瞄器和Safari3，它们撑持各自的属性前缀-moz-和-webkit-。上面的例子利用栏宽：
-moz-column-width:13em;
-webkit-column-width:13em;
-moz-column-gap:1em;
-webkit-column-gap:1em;
下一个例子利用栏数：
-moz-column-count:3;
-moz-column-gap:1em;
-moz-column-rule:1pxsolidblack;
-webkit-column-count:3;
-webkit-column-gap:1em;
-webkit-column-rule:1pxsolidblack;
这两个例子输入以下：
另有一个特征还没有失效，它就是“column-space-distribution”，这个属性能够形貌当页面中另有残剩空间时怎样分派栏目之间的间距。
关于CSS3中的Gird结构
我们看看上面这张图：
图中蓝色的线不会呈现在实践的网页中。关于这个结构庞大的三栏网页来讲，假如利用CSS3Gird结构的话，我们只需如许写：
body{columns:3;column-gap:0.5in;}
img{float：pagetopright;width:3gr;}
个中，body部分声明页面为3栏，栏间距为0.5英寸；img中float属性指明图片浮动地位为页面的右上角（CSS3定位好壮大-__-），而宽度为3个栏宽。只需如许两行CSS，我们就能够完成这个庞大的结构了。真的很奇妙。
Gird结构是好，不外假如你以为它很复杂的话，你就年夜错特错了。看看w3c中关于它的先容，你会发明了解它的意义不亚于看懂天书。幸亏仍是个草案，希望它到了正式版的时分，可以加倍复杂易用点。
Gird结构使用很普遍，最复杂的例子就是内容的分栏显现。但这个CSS3特征今朝还没有任何扫瞄器能够撑持它。谁如果能第一个撑持它（和别的CSS3草案），那就酷毙了。不晓得，比来非常低调的IE8，会不会是这第一个吃螃蟹的人呢？
破洛洛文章简介：到如今为止,只要一些已事情的CSS3特征.
界说背景巨细
原本我们只能对背景图片举行地位和反复体例的改动，不克不及像改动<img/>标签图片那样改动巨细。而在css3中就可以满意改动背景图片巨细的希望。
示例代码：
background-size:300px100px;
申明：背景图片300px暗示宽度，100px暗示高度。
今朝只要Opera9.5,Safari3andKonqueror扫瞄器中失掉撑持。在几种扫瞄器中的写法以下：
-o-background-size,-webkit-background-size和-khtml-background-size
text-shadow笔墨暗影效果
示例代码：
text-shadow:2px2px2px#09e;
四个参数分离暗示暗影的程度位移，垂直位移，含混水平，暗影色彩。
今朝撑持的扫瞄器有Opera9.5,Safari3,Konqueror，Safari3
box-sizing改动盒状模子布局
纵所周知div的盒状模子包含margin,border,padding和content四个部分.这四者的干系就无需我在这里布鼓雷门啦.可是和明天主题又关的仍是得说一下,那就是border内里是padding,padding内里是content.但是我们能够在css3.0中冲破这一布局.使之酿成content内里是border,border内里是padding.要完成这统统得创建在一个前提之下:box-dizing:border-box;
示例代码：
<styletype="text/css">
div.container{
width:400px;
border:10pxsolidblack;
height:40px;
}
div.split{
-moz-box-sizing:border-box;
width:50%;
height:40px;
border:10pxsilverridge;
float:left;
padding:5px;
}
</style>
<divclass="container">
<divclass="split">文本内容</div>
<divclass="split">文本内容.</div>
</div>
代码往失落-moz-box-sizing:border-box显现的效果为
今朝撑持的扫瞄器有firefox,Safari3和opera
另有一个多重背景，今朝罕见扫瞄器都不撑持，就不写了
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
页:
[1]