标签拓展

拓展标签应用；
1.线性渐变（颜色）：
（一般用于导航栏和需要进行色彩渐变修饰的区域）
.one{
height: 35px;
width: 100%;
background:linear-gradient(#e8e8e8,#fff);
}应设定宽度高度颜色渐变区域

上述程式运行结果为灰白色渐变，从上向下渐变。

2.文本放大溢出部分隐藏显示：
（用于文本放大时超出父边框影响排版时使用）

.sixone>div:nth-child(1){
	position: absolute;
	top: 10px;
	height: 230px;
	width: 210px;
	overflow: hidden;
}/*第一项图片位置大小定义*/
.sixone>div:nth-child(1)>img{
	transition: all 1s ease ;
}/*图片动画定义属性*/
.sixone>div:nth-child(1)>img:hover{
	transform: scale(1.2);
}/*第六栏第一项图片动画属性值*/

上述程式运行结果为，因图片和父边相同大小，所以放大必定会超过边框影响排版和观赏，在所以在定义图片所在块时添加overflow属性，属性值hidden为隐藏，即结果为在限定边框内显示放大，超出部分显示隐藏。定义动画属性时选定动画元素自身而非文本所在块元素，后在hover标签后跟随动画类型即可。

3.div块状元素变成圆形
定义div块宽和高同时添加border-radius：**%;后面的百分数值是属性值根据数值不同可以得到各组长短轴的椭圆，当为50%时，为圆形，也可以直接定义半径。注意宽高应设置为一样。

4.图片分层（z-index）
通常根据HTML文件中div所包裹的图片顺序默认最上面的图片显示为下层，也可以使用z-index（数值），可以根据属性值来设置图片显示顺序，小号在上，大号在下。注意z-定义的时图片所在块，而非图片本身。

以上属于个人总结，沿用请自行测试。
2020年5月14日