CSS新特性:圆角边框多栏Gird布局背景设置
互联网 发布时间:2009-04-02 19:35:22 作者:佚名
我要评论
![](/skin/2018/images/text-message.png)
网页制作Webjx文章简介:到现在为止,只有一些已经工作的CSS3特性.
到现在为止,只有一些已经工作的特性,他们中的一些如下:
圆角
从web2.0开始,开始流行使用圆角,如果你不使用圆角,你的网站可能不会被列入web2.0网站
到现在为止,只有一些已经工作的CSS3特性.
到现在为止,只有一些已经工作的特性,他们中的一些如下:
圆角
从web2.0开始,开始流行使用圆角,如果你不使用圆角,你的网站可能不会被列入web2.0网站。主要问题是,你至少需要4个图片(每个角一个)和一些JS或复杂的层来实现圆角。
这些将成为过去了!两行就足够了。让我给你个例子:
HTML:
This is easy
css 代码:
.round {
background-color: #666;
color: #fff;
line-height: 20px;
width: 200px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
这里是上面的截屏:
![](http://img.jbzj.com/file_images/css/20094219362157877801.jpg)
那么,有什么新东西?实际上CSS3的声明是border-radius。 到目前为止,这个特性尚未确定,众多浏览器生产商通过前缀支持该属性。Firefox使用 -moz- , Safari使用 -webkit-
这里同样支持你选择哪个角使用圆角,这可以通过使用“TopLeft TopRight BottomRight BottomLeft”实现。示例:
# -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
使用的图片可以是这样的:
![](http://img.jbzj.com/file_images/css/20094219362160977802.jpg)
border的另一个非常帮的特性是使用gradientcolors,而不是用图片:
![](http://img.jbzj.com/file_images/css/20094219362165677803.jpg)
CSS 代码:
.bordercolor{
border: 8px solid #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无法使用。
#p#
到现在为止,只有一些已经工作的CSS3特性.
多栏
该特性使生活更加容易,呵呵。这个新特性允许网页设计师将文字填入栏中。这可以通过两种方法实现,定义各栏的宽度,或者是定义栏数。
多栏布局目前只支持Mozilla核心的浏览器和Safari 3, 它们支持各自的属性前缀 -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: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
这两个例子输出如下:
![](http://img.jbzj.com/file_images/css/20094219362170377804.jpg)
还有一个特性尚未生效,它就是“column-space-distribution”,这个属性可以描述当页面中还有剩余空间时如何分配栏目之间的间距。
关于CSS3 中的 Gird 布局
我们看看下面这张图:
![](http://img.jbzj.com/file_images/css/20094219362175077805.jpg)
图中蓝色的线不会出现在实际的网页中。对于这个布局复杂的三栏网页来说,如果使用 CSS3 Gird 布局的话,我们只需这样写:
body { columns:3; column-gap:0.5in; }
img { float:page top right; width:3gr; }
其中,body 部分声明页面为 3 栏,栏间距为 0.5英寸;img 中 float 属性指明图片浮动位置为页面的右上角(CSS3 定位好强大 -__-),而宽度为 3 个栏宽。只需这样两行 CSS,我们就可以实现这个复杂的布局了。真的很神奇。
Gird 布局是好,不过如果你认为它很简单的话,你就大错特错了。看看 w3c 中关于它的介绍,你会发现理解它的意义不亚于看懂天书。好在还是个草案,但愿它到了正式版的时候,能够更加简单易用点。
Gird 布局应用很广泛,最简单的例子就是内容的分栏显示。但这个 CSS3 特性目前还没有任何浏览器可以支持它。谁要是能第一个支持它(以及其它 CSS3 草案),那就酷毙了。不知道,最近异常低调的 IE8,会不会是这第一个吃螃蟹的人呢?
#p#
到现在为止,只有一些已经工作的CSS3特性.
定义背景大小
本来我们只能对背景图片进行位置和重复方式的改变,不能像改变<img />标签图片那样改变大小。而在css3中就能满足改变背景图片大小的愿望。
示例代码:
background-size:300px 100px;
![](http://img.jbzj.com/file_images/css/20094219362179677806.gif)
说明:背景图片 300px表示宽度,100px表示高度。
目前只有Opera 9.5, Safari 3 and Konqueror浏览器中得到支持。在几种浏览器中的写法如下:
-o-background-size, -webkit-background-size和-khtml-background-size
text-shadow文字阴影效果
示例代码:
text-shadow: 2px 2px 2px #09e;
![](http://img.jbzj.com/file_images/css/20094219362182877807.gif)
四个参数分别表示阴影的水平位移,垂直位移,模糊程度,阴影颜色。
目前支持的浏览器有Opera 9.5, Safari 3, Konqueror , Safari 3
box-sizing改变盒状模型结构
纵所周知div的盒状模型包括margin,border,padding和content四个部分.这四者的关系就无需我在这里班门弄斧啦.但是和今天主题又关的还是得说一下,那就是border里面是padding,padding里面是content.然而我们可以在css3.0中打破这一结构.使之变成content里面是border,border里面是padding.要实现这一切得建立在一个条件之下:box-dizing:border-box;
示例代码:
<style type="text/css">
div.container {
width:400px;
border:10px solid black;
height:40px;
}
div.split {
-moz-box-sizing:border-box;
width:50%;
height:40px;
border:10px silver ridge;
float:left;
padding:5px;
}
</style>
<div class="container">
<div class="split">文本内容</div>
<div class="split">文本内容.</div>
</div>
![](http://img.jbzj.com/file_images/css/20094219362187577808.gif)
代码去掉-moz-box-sizing:border-box显示的效果为
![](http://img.jbzj.com/file_images/css/20094219362190677809.gif)
目前支持的浏览器有firefox,Safari 3和opera
还有一个多重背景,目前常见浏览器都不支持,就不写了
相关文章
- 这篇文章主要介绍了基于CSS 属性实现按钮悬停边框和背景动画集合,需要的朋友可以参考下2019-05-09
- 这篇文章主要介绍了CSS 制作带边框背景色透明的消息框的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-03
- 这篇文章主要介绍了css3 边框、背景、文本效果的实现代码,需要的朋友可以参考下2018-03-21
- 前几天在工作的时候遇到一个问题,项目需要实现一个效果,当鼠标移入一个元素的时候,元素出现一个动态的边框,通过网上查找资料看到有人推荐可以使用Css3来实现,后来试了2016-11-08
- CSS控制背景图像平铺,从而实现区域边框阴影的效果,可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,个人感觉还不错,具体实现如下建议收藏下哦2013-08-25
css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果
在网页布局中偶尔会用到div 边框阴影做一些特殊效果本文介绍两种实现方法:一种是利用内外层的div边框来实例层次感觉的css边框阴影效果,另一种是利用了背景图片再加内外div2012-12-18css样式div或li在ie6下背景平铺及border边框断线解决技巧
css样式div或li在ie6下背景平铺或边框断线解决办法2011-09-04- 本文通过代码给大家介绍css背景和边框标签的一些知识,通过相关属性设置背景颜色,背景图像,对css背景与边框的相关知识感兴趣的朋友一起看看吧2021-05-21
最新评论