CSS3--边框和vertical-align和渐变

边框

border-radius

• 作用：将原始的直角变为圆角
• 语法： border-radius: 100px 0px 0px 0px;
• 取值：
  • 数值
  • %
• 注意点：
  • 第一/二/三/四个参数: 指定左上角的半径按照左上/右上/右下/左下的顺序
    • 如果省略一个参数, 会变成对角的值
    • 如果省略两个参数, 会变成对角的值
    • 如果省略三个参数, 其它角会和它一样
    • 当参数大于边框宽度,内角也会变成圆角
  • 还可以通过border-top/bottom-left/right-radius的方式单独设置某一个角的值
    • border-top/bottom-left/righ-radius接收两个参数, 第一个表示水平方向, 第二个表示垂直方向border-top/bottom-left/righ-radius如果只传递了一个参数, 那么出自方向和水平方向的值一样
  • 绘制椭圆设置水平方向为宽度的一半, 设置垂直方向为高度的一半

---

边框图片

border-image-source

• 作用：用在边框的图片的路径。
• 语法：border-image-source：urs（“”）；
• 注意点：如果只通过source指定了哪一张图片作为边框的图片, 默认情况下会将图片放到边框的四个顶点。如果设置了边框图片, 那么就不会显示边框颜色, 边框图片的优先级高于边框颜色

border-image-slice

• 作用： 告诉浏览器如何对指定的边框图片进行切割
• 语法：border-image-slice: 70 70 70 70;
• 注意点：不带单位

border-image-width

• 作用：图片边框的宽度。
• 语法：border-image-width：0px；
• 注意点：如果通过border-image-width指定了边框图片的宽度, 那么默认的边框宽度就会失效

border-image-repeat

• 作用：图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。
• 语法：border-image-repeat：repeat；
• 取值：
  • stretch
  • repeat
  • round

border-image-outset

• 作用：边框图片向外移动
• 语法：border-image-outset：0px 0px 0px 0px；

border-image

• 作用：设置所有 border-image-* 属性的简写属性。
• 语法：border-image: 资源地址 切割方式 填充模式;

---

vertical-align

• 作用：设置元素的垂直对齐方式
• 语法：vertical-align： 属性设置元素的垂直对齐方式；
• 取值：

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

---

渐变

线性渐变

• 作用：上至下的渐变
• 语法：background: linear-gradient(颜色一, 颜色二);
• 取值：background: linear-gradient(red, green);
  background: linear-gradient(to top ,red, green);
  background: linear-gradient(to right ,red, green);
  background: linear-gradient(to left ,red, green);
  background: linear-gradient(to top right ,red, green);
  background: linear-gradient(45deg , #ff0000, green);
• 注意点：
  • 至少需要传递2个颜色, 至多没有上限
  • 默认情况下自动回自动计算纯色和渐变色的范围, 但是我们也可以手动指定
    手动指定的格式: 颜色 范围
    只有第一个颜色后面的范围是指定纯色的范围, 后面的都是指定渐变的范围

径向渐变

• 作用：中心向四周的渐变
• 语法：background: radial-gradient(颜色一, 颜色二);
• 取值：background: radial-gradient(red, green);
  background: radial-gradient(at top left ,red, green)；
  background: radial-gradient(at 200px 100px ,red, green);
  background: radial-gradient(100px, red, green);
  background: radial-gradient(100px at 200px 100px ,red, green)
• 注意点：
  • 线性渐变: 可以通过to 关键字的方式修改渐变的方向
  • 径向渐变: 可以通过at 关键字的方式修改开始渐变的位置
  • 如果需要同时指定扩散的位置和扩散的范围, 那么范围必须写到at前面