CSS3【2】—特效总结

最近抽了点时间，整理一下一些前端基础知识，写的不好的地方请大家踊跃留言，我会继续优化这一系列文章：

一、盒子阴影box-shadow

虚化的产物， 不占位，只是美观效果

  width:400px;
  height:400px;
  border:2px solid #000;
  /*值1 x轴方向的阴影位置   0与元素重叠 看不到   小于0  向左移动   大于0 向右移动
    值2 y轴方向的阴影位置   0与元素重叠 看不到   小于0  向上移动   大于0 向下移动
    值3 模糊度  当小于0 则 不见了  大于0 值越到越模糊
    值4 模糊距离  正值 越来越大  负值 越来越小
    值5 阴影色
 	值6 内外阴影  默认外部阴影  inset 内部阴影||outset 外部阴影*/
  box-shadow: 300px  -50px   10px   10px  red  inset;

（画的图不好看，凑合凑合能看懂就行）

二、文本阴影text-shadow与背景background-clip

1.文本阴影text-shadow：

文本阴影和盒子阴影差不多，只是参数少了

 /*字体加粗*/
font-weight: bold;
/*字间距*/
letter-spacing: 100px;

/*设置文本阴影*/
/*值1 x轴方向的阴影位置   0与元素重叠 看不到   小于0  向左移动   大于0 向右移动
  值2 y轴方向的阴影位置   0与元素重叠 看不到   小于0  向上移动   大于0 向下移动
  值3 模糊度  当小于0 则 不见了  大于0 值越到越模糊
  值4  阴影色
  注意：没有模糊距离和内阴影选项，若不给设置阴影色，则默认是文本的颜色*/
text-shadow: 20px  -40px   10px   red;

2.背景background-size|clip|image

（1）background-size：当背景色的层级没有背景图的层级高，出现图层时使用：

    背景图的大小：x   y
    若值给一个值默认一个方向比例沾满，另外一个会溢出（隐藏）
    x y 的值 可取 px  %

   	background-size:100%;

    background-size:100% 100%;

    background-size:100px 100px;

	/*常见的是溢出*/
   	background-size: cover;

---

（2）background-clip： 背景的绘制区域设置

 	/*边框内部开始计算*/
    background-clip: border-box;

    /*内边距内部开始计算*/
    background-clip: padding-box;

    /*内容去内部开始计算*/
    background-clip: content-box; 

---

（3）background-imag：linear-gradient()：线性渐变：在操控的是背景色（但是此时使用的确实背景图）

/*渐变色自动均分*/
background-image: linear-gradient(red,yellow,cyan,green);

/*定义及那边区域*/
background-image: linear-gradient(red 0%,yellow 50%);

/*多色定义渐变区域*/
background-image: linear-gradient(red 10%,yellow 20%,cyan 30%,green 40%);

/*没有渐变区域的背景色*/
background-image: linear-gradient(red 50%,yellow 50%);

/*
 角度单位是deg
         默认使用的效果是：180deg
         0deg  从下到上
         90deg 从右到左
         180deg 从上到下
         270deg 从左到右*/
/*定义角度的线性渐变*/
background-image: linear-gradient(270deg, red ,yellow );

---

（4）background-imag：radial-gradient()：径向渐变：在操控的是背景色（但是此时使用的确实背景图）

 /*径向渐变的特殊点：默认是椭圆 */
 background-image: radial-gradient(red 0,yellow 50% ,cyan 100%);

/*若此时可以设置形状则是根据为容器的形状而定*/
background-image: radial-gradient( circle , red 0,yellow 50%);

/* 定义线性渐变的为止center  top  bottom left right  xp  %  */
/*background-image: radial-gradient( ellipse at center, red 0,yellow 50%);*/
 background-image: radial-gradient( ellipse at 100px 200px, red 0,yellow 10%);

/*定义渐变圆的大小 半径 */
background-image: radial-gradient(200px 80px at 100px 200px, red 0,yellow 80%);
/*background-image: radial-gradient(500px 200px at center ,red 00% ,yellow 80%);*/

/* 径向渐变 */
 background-image: radial-gradient(200px 200px at 0 0 ,red 00% ,yellow 80%);

/* 线性渐变重复 */
background-image: repeating-linear-gradient(red 0px,rgba(255,255,0,0.2) 50px);

/* 径向渐变重复 */
 background-image: repeating-radial-gradient(250px 250px at center,hotpink 0,cyan 50px);

三、自定义字体font-family

/*自定义字体*/
    @font-face {
        font-family: ziJiZiDingYi;
        /*网络中的字体 有些字体是放在自己加的服务器上的，你自己加服务器中的个字体路径*/
        src: url("http://www.w3cschool.css/css3/Sansation_Light.ttf");
        /*当前的字体跟着自己的工程结构走 同样是放在自己加的服务器上*/
        src: url("simkai.ttf");
}

四、圆角border-radius

注：当设置的圆角半径远远大于实际半径的时候最终的效果也是一个圆

  /*圆角：边框的圆角，一个值，为圆角半径*/
  		width:400px;
        height: 400px;
        border:2px solid #000;
        background-color: aqua;
        
        border-radius: 50px;
        /*border-radius: 50%;*/

  /*可以分别每个角设置*/
  	width:400px;
    height: 400px;
    border:2px solid #000;
    background-color: aqua;
        
    border-top-left-radius: 10px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 150px;

	/*值为%时，是相对于当前的盒子的大小,50%时是圆*/
	width:400px;
    height: 400px;
    border:2px solid #000;
    background-color: aqua;
    
	border-radius: 50%;

五、分页column-count|gap|rule

注：此属性有浏览器兼容问题，详情请见w3cschool教程

		 /*当前屏被分为几块*/
        column-count: 3;
        /*块与块之间的间距*/
        column-gap: 30px;
        /*间距线*/
        column-rule: 1px solid red;