-css3高级技术(p)

---

layout: post
title: “CSS3高级技术”
categories: css
tags: css3
excerpt: 这篇文章是写一些css3常用的高级特性的，很好用

对于这些css3属性，在用百分数设置值的时候，都是相对于元素自身的宽高设置的

一、box-shadow(是给元素块添加周边阴影效果影)投影

box-shadow的原理是：在元素的原位置模一个和原元素一样大的阴影，然后再为这个阴影设置其他一些东西。

(1)浏览器支持: IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1

(2)语法：

box-shadow: x-shadow y-shadow blur spread color inset;

x-shadow	必需。水平偏移值。允许负值。	
y-shadow	必需。垂直偏移值。允许负值。	
blur(模糊)	可选。模糊距离。这个值实际上是指，阴影的发散距离，即从阴影有颜色到变成透明的距离。	
spread(范围)	可选。阴影尺寸。这个值实际上是加宽阴影的宽度，如果
                      已经设置border-radius,那么展现出来的阴影也将是圆角效果。
                      即，这个值的实际意思是，元素阴影向各个方向外拓展这个值的长度之后，再开始模糊
color	可选。阴影的颜色。请参阅 CSS 颜色值，可以用rgba，但是不能用gradient
inset	可选。将外部阴影 (outset默认) 改为内部阴影

(3)x-shadow和y-shadow: x-shadow和y-shadow的值，实质上就相当于设置了相对定位之后的top和left的值一样，是把整块元素的阴影相对与以前元素移动。

实例：box-shadow: 10px 10px 5px red；

(4)blur: 这个值实际上是在上下左右各加一半的长度。比如设置为10px；则在上面是5px的阴影，下面也是5px的阴影。

(5)spread：这个值可以设置为负，且一个负值可以在各个方向上缩小阴影的效果。这个值为在上下左右都加这么长的长度。比如设置为5px。就在上面阴影加5px，下面阴影也要加5px。所以，在阴影没有偏移的情况下，如果这个值设置为blur的负的一半，则完全抵消阴影。这个值即，元素阴影向各个方向外拓展这个值的长度之后，再开始模糊

(6)重要特性：叠加性。可以同时设置很多组的值在一个box-shadow上，用逗号“，”隔开。

    实例：box-shadow: 11px 8px #626262,
                      11px 9px #626262,
                      11px 10px #626262,
                      11px 11px #626262,
                      11px 12px #626262；

(7)用box-shadow实现outline圆角框效果：主要是利用了box-shadow的第三个值，和border-radius将框变弯。

    img {
    border-radius: 1px;
    box-shadow: 0 0 0 30px #cd0000;
    }

二、倒影box-reflect

这个属性是创建目标元素的一个倒影(仅仅是创建一个css效果，不占据空间尺寸，这个css效果会覆盖到其它元素的上面，和outline，box-shadow类似)。也要加上-webkit前缀才能使用。

-webkit-box-reflect: [ above | below | right | left ]? ? ?
具体来说-webkit-box-reflect最多可以由3部分组成
方位:
可以是下面4个值中的1个，above,below,left,right，分别表示上下左右。如果不是使用类似inherit等全局关键字，则此方位值是不能缺省的。
偏移大小:
倒影和原始元素偏移距离。可以是数值(可以是负数)，也可以是百分比值。如果是百分比值，则百分比大小是相对于元素自身尺寸计算的。和transform中translate的百分比计算是一致的。
遮罩图片:
对元素倒影的遮罩控制。语法类似于background-image。可以用一个渐变来控制。即，也可以给reflect出来的图形整体加上一个渐变效果，，这个值可以慢慢深究一下
-webkit-box-reflect: below 10px linear-gradient(transparent, white);

三、text-shadow(是给文本添加阴影效果)投影

(1)浏览器支持: IE9以及以下不支持

(2)语法：相比box-shadow少了一个spread属性

text-shadow: h-shadow v-shadow blur color;

x-shadow	必需。水平偏移值。允许负值。	
y-shadow	必需。垂直偏移值。允许负值。	
blur	可选。阴影模糊半径。	

color	可选。阴影的颜色。这个值可以用HSL(A)或者RGB(A)，不能用gradient

四、文字描边text-stroke

这个属性现在是firefox和edge支持。不过虽然edge不是-webkit内核，它也使用-webkit前缀。即，-webkit-text-stroke

这个属性是一个混合属性，包含text-stroke-width和text-stroke-color也就是描边的宽度和描边的颜色，只不过不能指定描边的类型，默认为实线描边，且为居中描边。

// 第一个宽度参数是必须的，第二个颜色参数如果不加的话，默认为用字体颜色填充
  -webkit-text-stroke: 2px green; 

五、渐变gradient

1、简介

• 渐变是属于background-image的，即在background-image中设置。渐变就是多种颜色之间平滑过度

• 渐变在一个拥有尺寸的盒子中被生成，被称之为渐变盒，但是渐变本身并没有内在的尺寸，也就说如果在一个没有尺寸的容器上定义渐变，将无法被呈现。

• 可以应用在所有接受图像的属性上

• 渐变一共有4种linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()

2、linear-gradient

注：由于兼容性的问题，渐变有很多种写法，推荐用自动补全的工具来兼容所有浏览器

• 语法：第一个值为指定渐变的方向，后面的值都为色标(由颜色值和位置组成，必须颜色值在前面而位置在后面).且色标至少需要两个。
  • 位置可以省略: 浏览器会把第一个颜色位置设置为0%，最后一个颜色位置设置为100%，所以可以省略那两个颜色值的位置
  • 如果只设置了两种颜色，位置为n%和m%，那么浏览器会把0-n%设置为颜色1纯色，m%-100%设置为颜色2纯色，n%-m%设置为颜色1到颜色2的渐变
  • 如果多种颜色占据同一个位置，如a、b、c三色均占据n%这一位置，则0%-n%为前一种颜色与a颜色的颜色渐变；然后是n%-n%的a颜色与c颜色的颜色突变；n%-100%是c颜色与后一种颜色的颜色渐变。所以，多种颜色占据一个位置的话，只有第一个与最后一个颜色是有用的
  • 如果所有颜色都没有指定位置，则所有颜色均匀分部
  • 颜色值可以用任意一种颜色模式，而位置可以用百分比和数值