水木告白工作室：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 属性被用于创建圆角:

1 div{
2 border:2px solid;
3 border-radius:25px;
4 }

box-shadow
- box-shadow 属性被用来添加阴影: box-shadow: 10px 10px 5px #888888; （左右偏移量，上下偏移量，阴影清晰度，阴影颜色）

border-image

border-image 属性允许你指定一个图片作为边框！用于创建上文边框的原始图像

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

三：CSS3 背景

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

background-image

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

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

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

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

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

background-size
- background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
  
  CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。可以指定像素或百分比大小。
  
  指定的大小是相对于父元素的宽度和高度的百分比的大小。
- ```
1 div
2 {
3     background:url(img_flwr.gif);
4     background-size:80px 60px;
5     background-repeat:no-repeat;
6 }
```
- 伸展背景图像完全填充内容区域：
- ```
1 {
2     background:url(img_flwr.gif);
3     background-size:100% 100%;
4     background-repeat:no-repeat;
5 }
```

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; 
}

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

一：CSS3 模块

二：CSS3 边框

三：CSS3 背景

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