CSS3设置边框、背景、文本属性

1.边框属性

border-radius属性

• 作用：允许为元素添加圆角边框
• 语法：border-radius:lt-x rt-x lb-x rb-x/lt-y rt-y lb-y rb-y;//分别为左上角、右上角、左下角、右下角的半径，如果只有两个参数               则第一个参数代表左上和右下，第二次参数代表右上和左下。

            例如： border-radius:100px 0px 100px 0px/100px 0px 100px 0px;//左上（100px,100px）,右上（0px,0px）,左下                                                                （100px,100px）,右下（0pa,0px）

                        border-radius:25px 20px 15px 10px;//左上（25px,25px）,右上（20px20px）,左下（15px,15px）,右下                                                                   （10pa,10px）

                        border-radius:25px 10px;//左上和右下为25，右上和左下为10；

                        border-radius:25px;//四个角都是以（25px,25px）画半径弧。

border-image属性

• 作用：为元素添加边框背景
• 语法：border-image:source slice width outset repeat;
• 语法属性：

                    source：定义边框的背景图片源，即图像URL。

                    slice ：定义如何裁剪背景图像。  

                    width：定义边框背景图像的显示大小（即边框显示大小）

                    outset：定义边框背景图像的偏移位置（不支持）

                    repeat：定义边框背景图像的重复性，重复（repeated）、拉伸（stretched）或平铺（rounded）

box-shadow属性 

•  作用：设置一个或多个下拉阴影的框
• 语法：box-shadow：h-shadow v-shadow blur spread color;
• 语法描述：

                 h-shadow：水平阴影的位置，允许负值。

                 v-shadow：垂直阴影的位置，允许负值。

                 blur：模糊距离。 

                 spread：阴影的大小。

                 color：阴影的颜色。

2.背景属性

background-origin属性

•  作用：定义背景图像的定义区域
• 语法：background-origin：padding-box|border-box|content-box;
• 语法描述：

                 padding-box：背景图像框填充的相对位置。

                 border-box：背景图像边界框的相对位置。

                 content-box：背景图像的相对位置的内容框。 

       

background-clip属性

•  作用：定义背景图像的裁剪区域
• 语法：background-clip：border-box|padding-box|content-box;
• 语法描述：

                 padding-box：从补白区域向外裁剪背景。

                 border-box：默认值，从边框区域向外裁剪背景。

                 content-box：从内容区域向外裁剪背景。 

         

background-size属性

•  作用：定义背景图像的裁剪区域
• 语法：background-clip：length|percentage|cover|contain;
• 语法描述：

                 length：设置背景图像高度和宽度。第一个值是宽度，第二个值是高度。

                 percentage：将计算相对于背景定位区域的百分比。第一个值是宽度，第二个值是高度。

                 cover：保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

                 contain：保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最大大小。。

 3.文本属性

   text-shadow属性 

•  作用：设置一个或多个下拉阴影的框
• 语法：text-shadow：h-shadow v-shadow blur color;
• 语法描述：

                 h-shadow：水平阴影的位置，允许负值。

                 v-shadow：垂直阴影的位置，允许负值。

                 blur：模糊距离。

                 color：阴影的颜色。

text-overflow属性

•  作用：定义省略文本的处理方式
• 语法：text-overflow：clip|ellipsis|string;
• 语法描述：

                 clip：修剪文本。

                 ellipsis：显示省略符号来代表被修剪的文本。

                 string：使用给定的字符串来代表被修剪的文本。 

注意：实际上，text-overflow属性仅是内容注解，表明当文本溢出时是否显示省略标记，并不具备样式定义的特性。要实现溢出时产生省略号的效果，我们应该再定义两个样式：white-space：nowrap（强制文本一行内显示）和overflow：hidden（溢出内容为隐藏） 

word-wrap属性

•  作用：定义文本超过指定容器的边界时是否断开转行
• 语法：word-wrap：normal|break-word;
• 语法描述：

                 normal：只在允许的断字点换行（浏览器保持默认处理）。

                 break-word：在长单词或URL地址内部进行换行。

CSS3 @font-face规则

@font-face属性描述：

                 font-family：规定字体的名称。

                 src：定义字体文件的URL。

                font-style：定义字体的样式。

                font-weight：定义字体粗细。

语法：  @font-face{                       

                font-family：myfirstfont。

                 src：url（sansation_bold.ttf）;

                font-weight：bold;         

}