css3（六）文字、背景和边框相关样式

• 文字阴影
  text-shadow：length length length color;
  说明：阴影X轴偏移 阴影Y轴偏移 阴影模糊值 阴影颜色
• 多层阴影效果：
  text-shadow: length length length color,
                        length length length color,
                        length length length color;
  多组之间用逗号隔开
  示列

P{
   text-shadow:2px 4px 2px rgba(255,0,0,0.8),
               2px 2px 2px rgba(255,0,0,0.8),
               4px 4px 4px rgba(0,0,255,0.9);
}

• 文本溢出处理
  text-overflow:规定当文本溢出包含元素时发生的事情。
  取值：
  (1) clip:修剪文本
  (2) ellipsis:显示省略符号来代表被修剪的文本。
  经过测试发现，使用ellipsis的时候，必须配合overflow:hidden; white-space:nowrap;
• 背景样式
  background-clip:规定背景的绘制区域
  （1） border-box:背景被裁剪到边框
  （2） padding-box:背景被裁剪到内边距框
  （3） content-box:背景被裁剪到内容框
  background-origin:规定背景图片的定位区域
  （1）border-box:背景图像相对于边框盒来定位。
  （2）padding-box:背景图像相对于内边距框来定位。
  （3） content-box:背景图像相对于内容框来定位。
  resize 属性规定是否可由用户调整元素的尺寸。
  none：用户无法调整元素的尺寸。
  both：用户可调整元素的高度和宽度。
  horizontal：用户可调整元素的宽度。
  vertical：用户可调整元素的高度。
  如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
• 支持多个背景
  background-image:url(“”),
                               url(“”),
                               url(“”);
  background:url(“”) no-repeat left top,
                      url(“”) no-repeat right bottom;
• 圆角边框的绘制
  border-radius:该属性允许您为元素添加圆角边框
  border-radius：是一个简写属性，用于设置四个 border-*-radius 属性
  border-top-left-radius：左上角圆角
  border-top-right-radius：右上角圆角
  border-bottom-left-radius：左下角圆角
  border-bottom-right-radius：右下角圆角
  border-radius还可以用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以同时设置1到4个值，应用规则与第一组值相同。
  示列

div{
       width:200px;
       height:200px;
       border:1px solid red;
       border-radius:20%/100px 50px 10px 20px;
   }

• 渐变
  渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
  示列

background:linear-gradient(to left,blue,yellow);
background:linear-gradient(to left top,blue,yellow);
background:linear-gradient(45deg,blue,yellow);
background:linear-gradient(0deg,yellow 0%,blue 30%);

• 径向渐变（Radial Gradients）- 由它们的中心定义
  示列

background: radial-gradient(circle,red, green, blue);

circle圆形渐变 ellipse椭圆渐变

• transparent 隐藏边框
  示列绘制三角形长方形

.a{
        width: 0px;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid transparent;
    }
.b{
        width: 0px;
        border-top: 100px solid red;
        border-left: 100px solid red transparent;
        border-right: 100px solid green ;
        border-bottom: 100px solid blue;
    }