CSS3(二)

圆角 border-radius

• border-radius:1-4个数字/1-4个数字
  
  • 前面是水平半径，后面是垂直半径
  • 四个数字方向分别是：左上 右上 右下 左下
  • 不给“/”则水平半径和垂直半径一样
  • border-radius:10px/5px;
  • border-radius:60px 40px 30px 20px /30px 20px 10px 5
• 例子： 椭圆 半圆 扇形
  
  • border-radius:50%;
  • border-radius: 100px/50px;/高/宽/
  • border-radius: 100%;
  • border-radius: 100px 100px 0 0;
  • border-radius: 100px 0 0 0;
  • ···

线性渐变 linear-gradient

• linear-gradient([<起点> || <角度>,]? <点>, <点>…)
• 只能用在背景上
• 颜色是沿着一条直线轴变化
• 参数
  
  • 起点：从什么方向开始渐变 left、top、left top
  • 角度：从什么角度开始渐变 xxx deg的形式
  • 点：渐变点的颜色和位置 red 50%，位置可选
• 重复线性渐变repeating-linear-gradient

径向渐变 radial-gradient

• radial-gradient([[ || ] [at ]?,| at ,]?[,]+);
• 从“一个点”向多方向颜色渐变
• shape形状 ： ellipse、circle 或设置水平半径,垂直半径
• size:渐变的大小，即渐变到哪里停止，有如下关键词:
  
  • closest-side：最近边； farthest-side：最远边；
  • closest-corner：最近角； farthest-corner：最远角 (默认值)
• position ：关键词|数值|百分比
• 重复的径向渐变

背景background-origin

• background-origin

  • padding-box 从padding区域显示(默认)

    background-origin: padding-box;

  • border-box 从border区域显示

    background-origin: border-box;

  • content-box 从content区域显示

    background-origin: content-box;

• background-clip

  • padding-box 从padding区域向外裁剪

    background-origin: padding-box;

  • border-box 从border区域往外裁剪

    background-origin: border-box;

  • content-box 从content区域往外裁剪

    background-origin: content-box;

  • text 文本裁剪

    background-clip: text;
        -webkit-background-clip: text;
        color: transparent;

• background-size
  
  • 100% 100% 百分比
  • 10px 10px 数值
  • contain 按原始比例收缩,背景图显示完整,但不一定铺满整个容器
  • cover 按原始比例收缩,背景图可能显示不完整,但铺满整个容器
  • background-attachment
  • 背景图片是滚动的还是固定的 fixed(固定的) 默认是滚动的

盒子阴影 box-shadow

• box-shadow: h v blur spread color inset;
  
  • h :水平方向偏移（+右，-左）
  • v : 垂直方向偏移（+下，-上）
  • blur : 模糊半径
  • spread : 扩展半径
  • color : 颜色
  • inset :加上这个表示内阴影 默认是外阴影
  • 内阴影的偏移方向（左）和外阴影相反（右）

文本阴影 text-shadow

• text-shadow : x y blur color
  
  • x轴偏移 y轴偏移 模糊度 颜色
  • 多层阴影制作文字立体效果 ,设置多种颜色,中间以逗号隔开
• 文字添加边框 text-stroke
  
  • text-stroke: 2px blue
  • 通过设定1px的透明边框，可以让文字变得平滑
  • 颜色设成透明能创建镂空字体

滤镜 filter

• -webkit-filter: normal; 正常
• -webkit-filter: grayscale(1); 灰度，取值范围0-1
• -webkit-filter: brightness(0.5); 亮度，取值范围0-1
• -webkit-filter: invert(1); 反色，取值范围0-1, 0为原图，1为彻底反色之后
• -webkit-filter: sepia(0.5); 叠加褐色，取值范围0-1
• -webkit-filter: hue-rotate(30deg); 色相（按照色相环进行旋转，顺时针方向，红-橙-
  黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红）此处为叠加黄色滤镜
• -webkit-filter: saturate(4); 饱和度，取值范围0 ~ *, 0为无饱和度，1为原图，值越高饱和度越大
• -webkit-filter: contrast(2); 对比度，取值范围0 ~ *, 0为无对比度（灰色），1为原图，值越高对比度越大
• -webkit-filter: opacity(0.8); 透明度，取值范围0 ~ 1, 0为全透明，1为原图
• -webkit-filter: drop-shadow(0 0 20px red); 阴影

遮罩 mask

• mask-image
• mask-position
• mask-repeat