17-CSS3边框和渐变

边框圆角基本概念

什么是边框圆角？

• 将直角的边框变成圆角的边框

边框圆角的格式：
*border-radius：左上 右上 右下 左下;

将矩形变成圆形的技巧

border-radius：50%;

系统如何绘制圆角？

• 首先根据指定的值找到圆心，然后按照指定的值作为半径绘制圆弧

注意点

• 当省略 了某一个角的值后系统会自动参考对角的值。
• 当只设置了一个值的时候，其他三个角都会参考这个值
• 当边框圆角的值大于边框宽度的时候，外边框和内边框都会成为圆角。
• 当边框圆角的值小于等于边框宽度的时候，外边框是圆角，内边框是直角。

绘制半圆

方式一

• border-radius: 左上角和右上角为元素宽高的一半，右下角和左下角为0，然后元素高度为原来的一半即可

正确实例

width: 400px;
height: 200px;(原来高度为400px)
border-top-left-radius: 200px 200px;
border-top-right-radius: 200px 200px;

错误实例

width: 400px;
height: 200px;(原来高度为400px)
border-top-left-radius:50% 50%;
border-top-right-radius: 50% 50%;

方式二

• 可以通过border-xxx-xxx-radius,的方式单独设置某一个角的值
• border-xxx-xxx-radius,接受两个参数，第一个表示水平方向，第二个表示垂直方向
• border-xxx-xxx-radius,如果只传递了一个参数，那么水平方向和垂直方向的值一样

border-top-left-radius: 100px;
border-top-right-radius: 100px;

绘制椭圆

• 绘制椭圆，设置水平方向为宽度的一半，垂直方向完为高度的一半.

border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50%;

边框图片

border-image-source: url("images/border.jpg");

• 告诉浏览器让哪一张图片成为边框

注意点:

• 如果只通过source指定了哪一张图片作为边框的图片, 默认情况下会将图片放到边框的四个顶点
• 如果设置了边框图片, 那么就不会显示边框颜色, 边框图片的优先级高于边框颜色

border-image-slice: 70 70 70 70;

• 告诉浏览器边框图片显示的宽度, 并不是指定边框的宽度
• 告诉浏览器如何对指定的边框图片进行切割
  注意点: 不带单位

border-image-repeat:stretch;(默认取值)

• 告诉浏览器除了边框图片四个角以外的图片如何填充, 默认是拉伸

border-image-slice: 70 70 70 70 fill

• 告诉浏览器中间内容需要填充，fill写在切割方式数字的后面

border-image-outset:上 右 下 左;

• 告诉浏览器边框图片需要向外移动多少

边框图片简写

border-image: 资源地址 切割方式 填充模式;

border-image: url("images/border.jpg") 70 fill repeat;

注意点：边框图片必须要和边框一起配合使用，否则边框图片无效。边框图片的切割宽度要和边框的宽度一样

vertical-align

1.什么是vertical-align?

• 设置元素的垂直对齐方式。

**什么是中线？

• 中线就是基线四分之一左右的位置

2.vertical-align注意点:

• text-align是设置给需要对齐元素的父元素
• vertical-align是设置给需要对齐的那个元素本身
• vertical-align只对行内元素和行内块元素有效
• 默认情况下图片和一行文字的基线对齐
• 基线就是一行文字中最短那个文字的底部

线性渐变

background: linear-gradient(颜色一，颜色二) 接受两个参数时，从颜色一渐变到颜色二
background: linear-gradient(方向，颜色一，颜色二)接受三个参数时，第一个参数是渐变方向

例如

background: linear-gradient(red, green);
background: linear-gradient(to top ,red, green);
 background: linear-gradient(45deg ,red, green);

• 默认情况下会从上至下的渐变

注意点

• 至少需要传递2个颜色, 至多没有上限
• 默认情况下自动回自动计算纯色和渐变色的范围, 但是我们也可以手动指定
• 手动指定的格式: 颜色 范围
• 只有第一个颜色后面的范围是指定纯色的范围, 后面的都是指定渐变的范围，最后剩下没有指定的都是纯色.

background: linear-gradient(to right, red 100px, green 200px, blue 300px);

• background: linear-gradient属性相当于一张背景图片
• -webkit-background-clip 可以将背景裁剪为文字的形状，也就是可以将背景色填充到文字上
• -webkit-background-clip 是一个私有的属性, 并不是所有的浏览器都能够识别
• //-ms代表【ie】内核识别码
• //-moz代表火狐【firefox】内核识别码
• //-webkit代表谷歌【chrome】/苹果【safari】内核识别码
• //-o代表欧朋【opera】内核识别码
• 在设置background: linear-gradient属性和-webkit-background-clip: text;属性后，文字颜色不能是纯色，只能通过rgba()来指定，才有效果
• 如果设置了文字颜色，那么背景颜色裁剪将无效，要想背景裁剪有效，文字颜色必须是透明色或者半透明

径向渐变

径向渐变属性:background: radial-gradient

background: radial-gradient(red, green);

• 线性渐变: 默认从上至下
• 径向渐变: 默认从中心点向四周扩散

*background: radial-gradient(at top left ,red, green);

• 线性渐变: 可以通过to 关键字的方式修改渐变的方向
• 径向渐变: 可以通过at 关键字的方式修改开始渐变的位置

background: radial-gradient(at 200px 100px ,red, green);

• 线性渐变: 可以通过度数 直接指定（deg）的方式修改渐变的方向
• 径向渐变: 可以通过at 具体像素 位置一， 位置二，的方式修改开始渐变的位置

background: radial-gradient(100px at 200px 100px ,red, green);

• 线性渐变可以指定纯色和渐变的范围
• 径向渐变也可以指定扩散的范围
  注意点: 如果需要同时指定扩散的位置和扩散的范围, 那么范围必须写到at前面