CSS3新特性-新增样式

---

文本效果

文本阴影

语法：

text‐shadow: x y blur color;

x：水平方向上右为正
y：垂直方向上下为正
blur：模糊程度
color：文本颜色

    <div>
        我是一行文本
    </div>

        div {
            text-shadow: 10px 5px 3px red;
        }
    </style>

文本裁剪

常用的一种，以省略号表示裁剪的文字

text‐overflow: ellipsis;

在使用text-overflow之前要先使用white-space: nowrap；和overflow: hidden;让该文本不换行并且溢出隐藏

    <div>
        我是一行文本
    </div>

        div {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>

单词换行

单词换行有两种方式，默认是normal换行时整个单词换下去
语法：

word-wrap: normal|break-word;

word‐break: normal|break‐all;

比如有两个单词在同一行，但是两个单词长度大于盒子的总长度，则第二个单词会整个换到第二行

    <div>
        asdhajkd aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>

        div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
            /* word-wrap: break-word; */
            /* word-break: break-all; */
        }

• 使用 word-wrap: break-word;
  
  第二行的单词在第二行换行了
• 使用word-break: break-all;
  
  它会将第一行剩余的空白部分填充满，然后换行

总结：

• word-wrap:break-word 会将长单词放在一个新行里，如果新行还是放不下，则会对长单词进行强制断句
• word-break:break-all 不会把长单词放在一个新行里，如果当前行放不下，则会直接进行强制断句

边框

圆角边框

语法：

border‐radius: 左上 右上 右下 左下;

<div></div>

        div {
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 10px 20px 30px 40px;
        }

原理：在div的四个角落分别画一个圆，圆的半径为设置的值,然后去掉边角的部分

• 画一个圆

        div {
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
        }

• 半圆

        div {
            width: 100px;
            height: 50px;
            background: red;
            border-radius: 50px 50px 0 0;
        }

图片边框

使用图片来创建边框
语法：

border-image: border-image-source|border-image-slice|border-image-width|border-image-outset｜border-image-repeat

border-image-source 用在边框的图片的路径                                      
border-image-slice  图片边框向内偏移                                          
border-image-width  图片边框的宽度    
border-image-outset	边框图像区域超出边框的量
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)

具体可参考图片边框

背景

图片背景

设置背景图片的大小
语法：

background-size: length|percentage|cover|contain;

• length 设置背景图像的宽度和高度，第一个值表示宽度，第二个值表示高度。如果只设置宽度，则高度会根据图片宽高比自动进行缩放

<div></div>

        div {
            width: 400px;
            height: 300px;
            background: url(img/street.png) no-repeat;
            background-size: 100px 100px;
            border: 1px solid #ccc;
        }

• percentage 以父元素的百分比来设置背景图像的宽度和高度

        div {
            width: 400px;
            height: 300px;
            background: url(img/street.png) no-repeat;
            background-size: 50% 50%;
            border: 1px solid #ccc;
        }

图片的宽高为父元素的宽高的一半，如果只设置一个则设置的为宽，高度按比例缩放

        div {
            width: 400px;
            height: 300px;
            background: url(img/street.png) no-repeat;
            background-size: 100% 100%;
            border: 1px solid #ccc;
        }

设置100%则填满，但不一定是原图的比例

• cover 保持图片宽高比不变，铺满整个容器的宽高，而图片多出的部分则会被截掉

        div {
            width: 400px;
            height: 300px;
            background: url(img/street.png) no-repeat;
            background-size: cover;
            border: 1px solid #ccc;
        }

• contain 保持图片宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域

        div {
            width: 400px;
            height: 300px;
            background: url(img/street.png) no-repeat;
            background-size: contain;
            border: 1px solid #ccc;
        }

渐变背景

• 线性渐变
  语法：

background: linear‐gradient(direction,fromColor,toColor...);

direction	渐变的方向或角度，取值：to top、to right、度数(以deg为单位，按顺时针方向，指定过渡在哪个方向结束) 
fromColor	渐变开始的颜色，从...颜色到... 
toColor	渐变结束的颜色

<div></div>

        div {
            width: 500px;
            height: 300px;
            background: linear-gradient(to right,red,blue,yellow);
        }

颜色的位置是可以改变的,默认位置是background: linear-gradient(to right,red 0%,blue 50%,yellow 100%);

        div {
            width: 500px;
            height: 300px;
            background: linear-gradient(to right,red 10%,blue 30%,yellow 70%);
        }

渐变方向也可改变
角度是从左下角，顺时针的方向

        div {
            width: 500px;
            height: 300px;
            background: linear-gradient(30deg,red,blue,yellow);
        }

• 放射性渐变
  语法:

background‐image: radial‐gradient(type‐position,fromColor,toColor...);

type-position 
(1)渐变的形状 
circle 圆 
ellipse 椭圆
(2)设置渐变范围半径的长度 
	closest-side 指定径向渐变的半径从圆心到离圆心最近的边 
	closest-corner 指定径向渐变的半径从圆心到离圆心最近的角 
	farthest-side 指定径向渐变的半径从圆心到离圆心最远的边 
	farthest-corner 指定径向渐变的半径从圆心到离圆心最远的角 
(3)渐变圆心的位置 
	关键字：at top、at center... 
		具体值：at 100px 100px 
fromColor	渐变开始的颜色，从...颜色到... 
toColor	渐变结束的颜色 

type-position可以设置三个值

        div {
            width: 500px;
            height: 300px;
            background: radial-gradient(circle closest-side at 100px 100px,red,blue,yellow);
        }

• 重复性渐变
  语法：

background‐image: repeating‐linear‐gradient(direction,fromColor,toColor number); 　重复的线性渐变
background‐image: repeating‐radial‐gradient(type‐position,fromColor,toColor number); 	重复的放射性渐变　

重复性渐变一般可以做成条纹装的背景

        div {
            width: 500px;
            height: 300px;
            background: repeating-linear-gradient(to right,red,red 10px,blue 10px,blue 20px);
        }

盒子

盒子大小

box-sizing: content-box|border-box

• border-box:包含边框和内边距
• content-box 不包含内边距和边框(默认值)

<div></div>

        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

默认情况下整个div的宽为102px,高为102px,设置的width和height为content的宽高

换成border-box后

        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            box-sizing: border-box;
        }

这时设置的width和height是content+padding+border

界面上直接调节盒子尺寸

语法：

resize: none|both|horizontal|vertical;

none	无法调整元素的尺寸
both	可调整元素的高度和宽度
horizontal	可调整元素的宽度
vertical	可调整元素的高度

该属性使用之前要加overflow,一般设置为auto
该功能可以让用户直接拖动盒子右下角来改变盒子尺寸

盒子阴影

语法：

box‐shadow: h‐shadow v‐shadow blur spread color inset

h‐shadow	必需，水平阴影的偏移位置，右偏是正方向 
v‐shadow	必需，垂直阴影的偏移位置，下偏是正方向 
blur	可选，模糊的距离 
spread	可选，阴影的尺寸
color	可选，阴影的颜色 
inset	可选，将默认的外部阴影 (outset) 改为内部阴影（inset）

        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            box-sizing: border-box;
            box-shadow: 10px 10px 5px #ccc;
        }

设置为内部阴影

        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            box-sizing: border-box;
            box-shadow: 10px 10px 5px #ccc inset;
        }