CSS编写格式边框与渐变内容补充

CSS编写格式

 

1.行内样式
2.内嵌样式
3.外链样式  --一般用外链
4.导入样式


外链样式和导入样式区别:
共同点: 都是将CSS代码写到了一个单独的文件中
不同点:
外链样式, 在显示网页时, 会先加载CSS文件, 再显示页面
导入样式, 在显示网页时, 会先显示界面, 再加载CSS文件

外链样式是通过一个HTML标签引入CSS的
而导入样式是通过@import引入CSS的, 而@import是CSS2.1推出, 所以导入样式存在兼容问题


优先级问题
行内样式的优先级最高
其它写法谁写在后面就听谁的

将直角的边框变为圆角的边框

2.边框圆角的格式?
border-radius: 左上 右上 右下 左下;

3.将正方形变为圆形的技巧
border-radius: 50%;

4.系统如何绘制圆角?
首先根据指定的值找到圆心
按照指定的值作为半径绘制圆弧

注意点

当只设置了一个值的时候, 其它三个角都会参考这个值
border-radius: 100px;
当边框圆角的值 > 边框宽度的时候, 外边框和内边框都会变成圆角
当边框圆角的值 <= 边框宽度的时候, 外边框是圆角, 内边框是直角

边框图片

告诉浏览器让哪一张图片成为边框
注意点:
如果只通过source指定了哪一张图片作为边框的图片, 默认情况下会将图片放到边框的四个顶点
如果设置了边框图片, 那么就不会显示边框颜色, 边框图片的优先级高于边框颜色
border-image-source: url("images/border.jpg");

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

诉浏览器边框图片显示的宽度, 并不是指定边框的宽度
注意点: 如果通过border-image-width指定了边框图片的宽度, 那么默认的边框宽度就会失效*/
/*border-image-width: 10px;*/

/*告诉浏览器除了边框图片四个角以外的图片如何填充, 默认是拉伸*/
/*border-image-repeat: stretch;*/
/*border-image-repeat: repeat;*/
border-image-repeat: round;
*告诉浏览器边框图片需要向外移动多少上   右   下   左*/
border-image-outset: 10px 30px 50px 70px;
/*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(45deg ,red, green);

/*默认情况下会从上至下的渐变*/
/*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);*/

注意点:
至少需要传递2个颜色, 至多没有上限
*/
/*background: linear-gradient(to right, red, green, blue, yellow);*/
/*
注意点:
默认情况下自动回自动计算纯色和渐变色的范围, 但是我们也可以手动指定
手动指定的格式: 颜色 范围
只有第一个颜色后面的范围是指定纯色的范围, 后面的都是指定渐变的范围

webkit-background-clip 可以将背景裁剪为文字的形状
注意点:
-webkit-background-clip 是一个私有的属性, 并不是所有的浏览器都能够识别
//-ms代表【ie】内核识别码
//-moz代表火狐【firefox】内核识别码
//-webkit代表谷歌【chrome】/苹果【safari】内核识别码
//-o代表欧朋【opera】内核识别码

径向渐变

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

background: radial-gradient(red, green);

性渐变: 可以通过to 关键字的方式修改渐变的方向
径向渐变: 可以通过at 关键字的方式修改开始渐变的位置
线性渐变: 可以通过to deg的方式修改渐变的方向
径向渐变: 可以通过at 位置 位置的方式修改开始渐变的位置  background: radial-gradient(at 200px 100px ,red, green);线性渐变可以指定纯色和渐变的范围
径向渐变也可以指定扩散的范围

注意点:
如果需要同时指定扩散的位置和扩散的范围, 那么范围必须写到at前面