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 :指定径向渐变的半径长度为从圆心到离圆心最远的边