水木告白工作室：CSS3之路 （一：圆角、边框、背景）

自学于菜鸟教程网站：http://www.runoob.com/，万分感谢这个网址，非常适合学习。本文仅用于自学，整理记忆。如有侵权请告知！

CSS 用于控制网页的样式和布局。

CSS3 是最新的 CSS 标准。

一：CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

• 选择器
• 盒模型
• 背景和边框
• 文字特效
• 2D/3D转换
• 动画
• 多列布局
• 用户界面

二：CSS3 边框

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象。

边框属性：

• border-radius
  • 可以给任何元素制作 "圆角"。

  • 指定背景色制作圆角
    #rcorners1 {
        border-radius: 25px;
        background: #8AC007;
        padding: 20px; 
        width: 200px;
        height: 150px; 
    }
    指定边框制作圆角
    #rcorners2 {
        border-radius: 25px;
        border: 2px solid #8AC007;
        padding: 20px; 
        width: 200px;
        height: 150px; 
    }
    制定背景图片
    #rcorners3 {
        border-radius: 25px;
        background: url(paper.gif);
        background-position: left top;
        background-repeat: repeat;
        padding: 20px; 
        width: 200px;
        height: 150px; 
    }

     

  • border-radius 属性被用于创建圆角:

  • div{
    border:2px solid;
    border-radius:25px;
    }

     

• box-shadow
  • box-shadow 属性被用来添加阴影: box-shadow: 10px 10px 5px #888888; （左右偏移量 ，上下偏移量，阴影清晰度，阴影颜色）
• border-image
  • border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像

  • div
    {
    border-image:url(border.png) 30 30 round;
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    }

     

三：CSS3 背景

CSS3中包含几个新的背景属性，提供更大背景元素控制。

• background-image

  • 通过background-image属性添加背景图片。

    不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

  • #example1 { 
        background-image: url(img_flwr.gif), url(paper.gif); 
        background-position: right bottom, left top; 
        background-repeat: no-repeat, repeat; 
    }

    给不同的图片设置多个不同的属性:

  •  {
        background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    }

     

• background-size

  • background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

    CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。可以指定像素或百分比大小。

    指定的大小是相对于父元素的宽度和高度的百分比的大小。

  • div
    {
        background:url(img_flwr.gif);
        background-size:80px 60px;
        background-repeat:no-repeat;
    }

     

  • 伸展背景图像完全填充内容区域：

  • {
        background:url(img_flwr.gif);
        background-size:100% 100%;
        background-repeat:no-repeat;
    }

     

• background-origin

  • background-Origin属性指定了背景图像的位置区域。

    content-box, padding-box,和 border-box区域内可以放置背景图像。

    div
    {
        background:url(img_flwr.gif);
        background-repeat:no-repeat;
        background-size:100% 100%;
        background-origin:content-box;
    }

     

• background-clip
  • background-clip背景剪裁属性是从指定位置开始绘制。

  • #example1 { 
        border: 10px dotted black; 
        padding: 35px; 
        background: yellow; 
        background-clip: content-box; 
    }