【css3-03】新增ui方案

1.文本新增样式

1.1.opacity:指定了一个元素的透明度

opacity: value|inherit;

value的值从0到1.。

inherit表示从父元素继承。

1.2.新增颜色模式rgba

rgba是css3新增的一个样式，它有四个参数，分别代表：

• 红色（R）0 到 255 间的整数，代表颜色中的红色成分。。
• 绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。
• 蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分。
• 透明度（A）取值 0~1 之间， 代表透明度。

#p1 {background-color:rgba(255,0,0,0.3);} /* 红 */
#p2 {background-color:rgba(0,255,0,0.3);} /* 绿 */
#p3 {background-color:rgba(0,0,255,0.3);} /* 蓝 */

1.3.文字阴影：text-shadow

text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边）

默认值：none        不可继承

值（四个值：样式，水平偏移量，垂直偏移量，模糊半径）

      颜色：可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）选择的颜色。

必选。这些长度值指定阴影相对文字的偏移量。

        指定水平偏移量，若是负值则阴影位于文字左边。        

        指定垂直偏移量，若是负值则阴影位于文字上面。

       如果两者均为0，则阴影位于文字正后方(如果设置了 则会产生模糊效果)。

可选。这是模糊值。如果没有指定，则默认为0。

       值越大，模糊半径越大，阴影也就越大越淡。

1.4.文字描边：-webkit-text-stroke

只有webkit内核才支持：-webkit-text-stroke，

：文本宽.

：文本颜色.

  

      我的天
  

1.5.文字排版:direction

   如果需要文字从右到左排列，一定要配合unicode-bidi:bidi-override;来使用。值有ltr（从左到右），rtl（右到左）。。。。。

  

      我的天
  

1.6.text-overflow :

确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（'...'）。

如果需要出现省略号样式，必须配合两个样式才能实现：

white-space:nowrap; 
overflow:hidden; 

还需要注意的是，元素必须要有块级元素的属性性质，要不然会被内容撑开。

  

      我的天sdhdgjhdsjgjdsgjhsghdgjs
  

2，盒模型新增样式

2.1.盒模型阴影:box-shadow 

box-shadow ：以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。 如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text shadows 规则相同(第一个阴影在最上面)。

默认值:  none    不可继承

值：

    inset：默认阴影在边框外。使用inset后，阴影在边框内。

       这是头两个 值，用来设置阴影偏移量。

       设置水平偏移量，如果是负值则阴影位于元素左边。

       设置垂直偏移量，如果是负值则阴影位于元素上面。

       如果两者都是0，那么阴影位于元素后面。

       这时如果设置了 或 则有模糊效果。

       这是第三个 值。值越大，模糊面积越大，阴影就越大越淡。 

       不能为负值。默认为0，此时阴影边缘锐利。

       这是第四个 值。取正值时，阴影扩大；取负值时，阴影.收缩。默认为0，此时阴影与元素同样大。

       阴影颜色，如果没有指定，则由浏览器决定

box-shadow:样式 水平偏移量 垂直偏移量 模糊半径 模糊收缩量;

多层形式：

box-shadow:0 0 30px 30px #000,inset 0 0 30px yellow;

2.2.倒影:-webkit-box-reflect 

-webkit-box-reflect：设置元素的倒影（准确的来说不能算是css3的东西，但需要大家知道）

默认值:none  不可继承

值：（必须是123的顺序）

倒影的方向：第一个值，above, below, right, left

倒影的距离：第二个值，长度单位

渐变：第三个值

  

      我的天
  

值可取实例：

-webkit-box-reflect:right;
-webkit-box-reflect:right 10px;
-webkit-box-reflect:right 10px linear-gradient(-90deg,rgba(0,0,0,1) 0,rgba(0,0,0,0) 80%);

2.3.resize:调节元素大小

resize CSS 属性允许你控制一个元素的可调整大小性。

（一定要配合overflow：auto使用）

默认值：none  不可继承

值：

    none：元素不能被用户缩放。 

    both：允许用户在水平和垂直方向上调整元素的大小。

    horizontal：允许用户在水平方向上调整元素的大小。

    vertical：允许用户在垂直方向上调整元素的大小。

2.4.box-sizing:

 默认情况下，盒子的可见框的大小由内容区，内边距和边框共同决定。

box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）        

可选值：

content-box默认值，宽度和高度用来设置内容区的大小
border-box：宽度和高度用来设置整个盒子可见框的大小

3.新增UI样式

3.1.圆角:border-radius

简写属性有四个值:分别是左上，右上，右下，左下。

border-radius: 10px 20px 30px 40px;

也可以单独设置其四个位置的圆角：

• border-top-left-radius：左上
• border-top-right-radius：右上
• border-bottom-right-radius ：右下
• border-bottom-left-radius：左下

通过该方式的原理是通过画一个圆向一个矩形上靠。我们还可以通过长半轴和短半轴来实现对圆角的设置：

  border-radius: radius

该方式是通过一个长半轴和短半轴来确定其边框圆角，即：radius=长半轴/短半轴来实现，例如画一个椭圆往矩形的四个角靠的效果：

  

      我的天
  

将这个椭圆变成一个圆则是：60px/60px。效果将无任何改变。

重点：扩展。

3.2.边框图片

border-image CSS属性允许在元素的边框上绘制图像。。这使得绘制复杂的外观组件更加简单，使用 border-image 时，其将会替换掉 border-style 属性所设置的边框样式

默认值：              不可继承

   border-image-source: none

   border-image-slice: 100%

   border-image-width: 1

   border-image-outset: none

   border-image-repeat: stretch

border-image-source：属性定义使用一张图片来代替边框样式；如果只为none，则仍然使用border-style 定义的样式。

默认值：none   不可继承。

border-image-source: url("img/border-image.png");

border-image-slice：属性会通过规范将 border-image-source  的图片明确的分割为9个区域：四个角，四边以及中心区域。

并可指定偏移量。边框会明确被分为9个区域，通过将border-image-source  的图片分为9个局域，后将其填充到边框的9个局域内。默认情况下边框包裹的内容区不被填充，可以使用关键字fill实现内容区填充。

	border-image-source: url("img/border-image.png");
	border-image-slice: 33% 33% fill;

可以设置四个百分百值，分别表示切九宫格的刀路。

border-image-repeat：定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

默认值：stretch  不可继承

值：

stretch （拉伸）

 repeat，round（平铺）

border-image-width：定义图像边框宽度。 默认是使用border的边框大小。在设置border-image-width后边框宽度没有变小，只是边框图片变小。

默认值：1   不可继承

border-image-outset：属性定义边框图像可超出边框盒的大小

默认值：0  不可继承

正值： 可超出边框盒的大小，不可为负值或者说负值不会生效。

注意的是：

  border-image-slice，border-image-width，border-image-outset，border-image-repeat想要设置一个或多个的时候，必须需要先设置  border-image-source属性，她们都依赖以  border-image-source属性

4，渐变

渐变是一个背景图片，背景图片，背景图片。使用的属性为：background-image

4.1.线性渐变

  为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

-默认从上到下发生渐变

              linear-gradient(red,blue);

-改变渐变方向：（top bottom left right）

              linear-gradient(to 结束的方向,red,blue);

-使用角度

              linear-gradient(角度,red,blue);

background-image:linear-gradient(90deg,red,blue);

4.2.径向渐变

radial-gradient() 函数创建一个，用来展示由原点（渐变中心）辐射开的颜色渐变。

-默认均匀分布

   radial-gradient(red,blue);

-不均匀分布

    radial-gradient(red 50%,blue 70%);

-改变渐变的形状

  radial-gradient(circle ,red,blue)

   circle

   ellipse（默认为椭圆）

-渐变形状的大小

   radial-gradient(closest-corner  circle ,red,blue)

   closest-side   最近边

   farthest-side  最远边

   closest-corner 最近角

   farthest-corner 最远角  （默认值）

-改变圆心

    radial-gradient(closest-corner  circle at 10px 10px,red,blue);