CSS3 入门1

最新推荐文章于 2024-05-24 01:00:03 发布

绿足

最新推荐文章于 2024-05-24 01:00:03 发布

阅读量422

点赞数

分类专栏： CSS （3）文章标签： css3 css 层叠样式表

CSS （3）专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS3 入门 1

一. 新增选择器

使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。 CSS3的属性选择器主要包括以下几种：

1. E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value 开头的；
2. E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value 结束的；
3. E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；

二. 新增结构伪类选择器

介绍

这节内容是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法：

1. :first-child选择某个元素的第一个子元素；
2. :last-child选择某个元素的最后一个子元素；
3. :first-of-type选择一个上级元素下的第一个同类子元素；
4. :last-of-type选择一个上级元素的最后一个同类子元素；
5. :nth-child（）选择某个元素的一个或多个特定的子元素；
6. :nth-last-child（）选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
7. :nth-of-type（）选择指定的元素；
8. :nth-last-of-type（）选择指定的元素，从元素的最后一个开始计算；
9. :only-child选择的元素是它的父元素的唯一一个了元素；
10. :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
11. :empty选择的元素里面没有任何内容。

三. CSS3圆角边框

到目前为止，Safari浏览器、Firefox浏览器、Opera、IE10+浏览器及Chrome浏览器都支持这种绘制圆角边框的样式。

在CSS3中，只要使用border-radius属性指定好圆角的半径，就可以绘制圆角边框了。

border-radius中指定两个半径

在border-radius属性中，可以指定两个半径。指定方法如下所示。

  
  border-radius: 40px 20px;

针对上方的这种情况，各种浏览器的处理方式并不一致。在Chrome浏览器与Safari浏览器中，会绘制出一个椭圆形边框，第一个半径为椭圆的水平方向半径，第二个半径为椭圆的垂直方向半径。在Firefox浏览器与Opera浏览器中，将第一个半径作为边框左上角与右下角的圆半径来绘制，将第二个半径作为边框右上角与左下角的圆半径来绘制。

四. CSS3图片边框

在CSS3之前，如果要使用图像边框，若元素的长或宽是随时可变的，页面制作通常采用的做法是让元素的每条边单独使用一幅图像文件。

使用border-image属性，会让浏览器在显示图像边框时，自动将所使用到的图像分割为9部分进行处理，这样就不需要页面制作者再另外进行人工处理了。另外，页面中也不需要因此而使用较多的元素了。

在CSS3中，除了可以使用border或border-width属性指定边框的宽度外，使用border-image属性同样可以指定边框的宽度，方法如下：

border-image: url（'图像文件路径'） A B C D/border-width

如图中所示，图像被自动分割为9部分。分割后的图像在CSS3中的名称如表所示

border-top-left-image / border-top-image / border-top-right
border-left-image / / border-right-image
border-bottom-left-image / border-bottom-image / border-bottom-right-image

样式代码如下：

  
  .wrap {
   border:solid;   
   border-image:url（/course/54d1cae088dba03f2cd1fec1/img/border.png） 18 18 18 18/18px ;
   -webkit-border-image:url（/course/54d1cae088dba03f2cd1fec1/img/border.png） 18 18 18 18/18px;
   -moz-border-image:url（/course/54d1cae088dba03f2cd1fec1/img/border.png） 18 18 18 18/18px;
   width:300px;
}

另外，在上述代码中A、B、C和D四个参数只指定了一个参数18px，这是因为CSS3中，如果此处的四个参数完全相同，可以只写一个参数，将其他三个参数省略。

中央图像自动拉伸

浏览器将边框所用图像自动分割为9部分后，除了将border-top-image、border-left-image、border-right-image、border-bottom-image这4部分自动分配为四条边所用的图像之外，将位于中间部分的图像分配给元素边框包围的中间区域，随着div元素的内容变化的同时，或者在样式代码中修改div元素的宽度或高度的同时，中间部分的图像也会自动进行伸缩，以填满该中间区域。

绘制四个角不同半径的圆角边框

可以在border-image属性中指定元素四条边中的图像是以拉伸的方式显示，还是以平铺的方式显示，指定方法如下所示。

  
  border-image: url（文件路径） A B C D/border-width topbottom leftright

其中，topbottom表示元素的上下两条边中图像的显示方法，leftright表示元素的左右两条边中的显示方法。在显示方法中可以指定的值为repeat、stretch、round三种。

repeat

将显示方法指定为repeat时，图像将以平铺的方式进行显示。示例代码：

  
  .wrap {
   border-image:url（/course/54d1cae088dba03f2cd1fec1/img/border.png） 18/5px repeat repeat;
   -webkit-border-image:url（/course/54d1cae088dba03f2cd1fec1/img/border.png） 18/5px repeat repeat;
   -moz-border-image:url（/course/54d1cae088dba03f2cd1fec1/img/border.png）  18/5px repeat repeat;
}

stretch

将显示方法指定为stretch时，图像将以拉伸的方式进行显示。

repeat+stretch

将显示方法指定为repeat+stretch时，图像将以平铺方式和拉伸方式结合使用。示例如下：

  
  .wrap {
   border-image:url（/course/54d1cae088dba03f2cd1fec1/img/border.png） 18/5px repeat stretch;
   -webkit-border-image:url（/course/54d1cae088dba03f2cd1fec1/img/border.png） 18/5px repeat stretch;
   -moz-border-image:url（/course/54d1cae088dba03f2cd1fec1/img/border.png）  18/5px repeat stretch;
}