边框圆角基本概念
什么是边框圆角？
- 将直角的边框变成圆角的边框
边框圆角的格式：
*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只对行内元素和行内块元素有效
- 默认情况下图片和一行文字的基线对齐
- 基线就是一行文字中最短那个文字的底部
<style>
img{
vertical-align: baseline;(和文字基线对齐)
vertical-align: top;(和盒子顶部对齐)
vertical-align: bottom;(和盒子底部对齐)
vertical-align: text-top;(和文字顶部对齐)
vertical-align: text-bottom;(和文字底部对齐)
vertical-align: middle;(和文字中线对齐)
}
</style>
线性渐变
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前面
