CSS3基础

圆角的直径等于盒子的宽高，形成一个扇形

右上角扇形

border-radius:{

width:100px;

height:100px;

background:red

border-radius:0 100px 0 0;

}

圆角的直径等于盒子宽度的一半，形成一个半圆

上半圆

border-radius:{

width:100px;

height:50px;

background:red

border-radius:50px 50px 0 0;

}

盒子阴影

默认外阴影，

box-shadow: insert x y blur color;（20px 20px 10px red）

insert：内阴影

距离x轴的距离；距离y轴的距离；阴影值大小，值越大，越模糊；阴影颜色,起点（0，0）即盒子左上角开始

background-size:背景图片高度和宽度,既可以给值也可以给百分比

background-size:100px/50%  70px/50%;

注：如果只给一个值得话，另外一个值则是auto(自动)

cover 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的大小，图片不能完整显示

background-size:cover

contain 保持图像的纵横比并将图像缩放成适合背景定位区域大小，不能完全覆盖图片

background-size:contain

text-shadow属性

blur 可选，模糊距离

color 可选，阴影的颜色

text-shadow:20px 20px 10px red;

20px：距离X轴的距离 ，允许负值

20px：距离顶部y轴的距离 ，允许负值

10px：阴影的大小，值越大，越模糊

red：阴影的颜色

CSS3渐变

线性渐变

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

background:linear gradients{to right bottom,red,green,blue}

从左上到右下颜色是红绿蓝

background:linear gradients{to right bottom,red,green 80%}

从左上到右下颜色是红色，然后在80%的位置变成绿色

径向渐变

~形状为圆形的径向渐变~

background:radial gradients{circle,red,green,blue;}

形状为圆形的径向渐变（去掉circle，默认椭圆形径向渐变），颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合形成

~颜色结点不均匀分布的径向渐变~

background: radial-gradient{(red 5%, green 15%, blue 60%);}

注：属性值之间用逗号隔开

text-overflow 属性

超出部分显示省略号

white-space:nowrap  文本不会换行，控制在同一行

overflow:hidden  超出父盒子区域内容隐藏

text-overflow:ellipsis  用省略号来代表被修剪的文本

注：父盒子必须是块元素，要有宽高

控制多行展示省略号:

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;谷歌内核下的弹性盒子

-webkit-line-clamp: 2;控制多少行

word-break: break-all;破坏单词，让长单词强制换行

-webkit-box-orient: vertical;纵向排列文字