前端HTML5

HTML笔记2
一、边框

div{
				width:400px ;
				height: 300px;
				background-color: gold;
				/*边框颜色*/
				/*/border-color: blue;*/
				/*上左右下*/
				/*border-color: red orange green blue;*/
				/*上下 左右*/
				border-color: red orange;
				/*border-top-color: red;
				border-left-color:orange;
				border-right-color:green;
				border-bottom-color:blue;*/
				/*边框宽度*/
				/*border-width: 5px 15px 25px 35px;*/
				/*上下左右*/
				border-width: 5px 15px;
				/*border-width: 15px;*/
				/*border-top-width:5px;
				border-right-width:15px;
				border-bottom-width: 25px;
				border-left-width: 35px;*/
				/*边框样式*/
				/*border-style: /*dashed:(虚线)*//*solid:(实线) dotted:(点线)double:(双线)*/
				/*border-top-style: solid;
				border-right-style: dashed;
				border-bottom-style: double;
				border-left-style: dotted;*/
				/*border-style: solid dashed double dotted;*/
				/*上下 左右*/
				border-style: solid dashed;
                /* 圆角 */
				border-radius:10px 20px 30px;
				border-radius:50%;
                /* 边框阴影 */
				/* box-shadow:水平 垂直 大小 颜色 */
				/* border-image:url(   ./jpg) 15 15 round; */
				/* 图形边框 */
				/* border-image: url(.../png) 15 15 round; */
			}

二、复合属性
1、flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
2、flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
3、 flex-direction 属性规定灵活项目的方向。
4、 flex-wrap 属性规定灵活项目是否拆行或拆列。
5、 flex-flow:flex-direction flex-wrap;复合属性
6、 flex-direction代表的值有：row|row-reverse|column|column-reverse
7、 flex-wrap代表值有：nowrap|wrap|wrap-reverse

1、order弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面，可以 为负值，属性设置弹性容器内弹性子元素属性。

.boss {
				width: 400px;
				height: 300px;
				border: 1px solid red;
				display: flex;
			}
.box1 {
				width: 100px;
				height: 100px;
				background-color: pink;
				 **order: -2;** 
				align-self: auto;
			}
<div class="boss">
			<div class="box1">11111</div>
			</div>

三、background的属性值
1、 background-Origin 属性指定了背景图像的位置区域。
2、background-clip背景剪裁属性是从指定位置开始绘制。

1、线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background-image: linear-gradient(方向或角度, 颜色, 颜色, …);
默认从上往下
2、to left|top|right|bottom 方向 ||to bottom right

background-image: linear-gradient(to left,red,green);

3、repeating-linear-gradient重复的线性渐变

	background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

4、径向渐变（Radial Gradients）- 由它们的中心定义
（1）background-image: radial-gradient(形状 大小 at position, 颜色, …, 颜色);
（2） 形状circle 表示圆形，ellipse 表示椭圆形
5、大小farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
（1）、closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
（2)、closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
（3）、farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边