HTML基础-11

最新推荐文章于 2024-05-26 20:06:59 发布

骑着小黑马

最新推荐文章于 2024-05-26 20:06:59 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/weixin_43661315/article/details/87926714

web前端专栏收录该内容

57 篇文章

订阅专栏

CSS小技巧

通过边框画三角形：
    	Div {         //设置一个 DIV
			Width:0;//宽度为0
			Height:0;//高度为0
			Border-style:solid;//边框样式实线
			Border-width:10px;//边框宽度----这就是三角形的宽度
			Border-color: transparent transparent green transparent;//只设置一个边框的颜色，其他的设置为透明色
			Position: absolute;//通过定位移动到需要的位置

}

渐变:

通过CSS方式实现页面中渐变图片的效果(渐变色)
1. 线性渐变
   组成:
   	   渐变方向
   	   	  ◆ to + 固定方向 (left  | right | top | bottom)

   	   	  ◆ 通过一个角度表示渐变方向
   	   	  	 0deg :  从下向上渐变    

   	   	  	 90deg:  从左向右渐变

   	   开始颜色
   	   结束颜色

   	   渐变范围(默认,从开始向结束)

  语法:
     background-image: linear-gradient();


     例如:
       background-image: linear-gradient(
            
            /* 1. 设置渐变方向 */

            /* 固定方向 */
            /* 从左向右 */
            to  right,
            /* 开始颜色 */
            red,
            /* 结束颜色 */
            blue
		);

2. 径向渐变
	 组成:
	     渐变的圆心位置和范围(半径大小)
	 	 开始颜色

	 	 结束颜色

	 语法:

	 	 background-image: radial-gradient(                 
              /* 半径为100px ,圆心位置在中心位置处 */
              /* 100px  50px at left top, */
              100px 50px at 100px 20px,
              red,
              blue

	 	  );

	 	  备注:
	 	     1. 确定圆心位置:  at + left | right |top  | bottom | center
	 	     2. 确定圆心位置:  at + 值;

	 默认是按照正圆的方式渐变
	 如果希望是椭圆渐变: 调整渐变的半径值即可

多背景,背景尺寸大小设置

注意:
 	设置图片标签大小 : width | height 
 	设置背景图大小: background-size:


多背景: 一个盒子可以同时设置多张背景图片.
写法:
background: url("bg1.png") left top no-repeat,
		  			  url("bg2.png") right top no-repeat,
		  			  url("bg3.png") right bottom no-repeat,
		  			  url("bg4.png") left bottom no-repeat,
		  			  url("bg5.png") center no-repeat;

过渡(补间动画):

开始状态:(默认的显示效果)

结束状态:(元素通过一系列操作之后的样式效果)

属性:transition[复合属性]

	/* 当前盒子中哪些属性要有动画效果 */
		transition-property: all;
	/* 设置动画执行时间 */
		transition-duration: 1s;
	/* 设置动画延时时间 */
		transition-delay: 1s;
	/* 设置动画执行速度:  ease;
			linear 匀速*/
		transition-timing-function: linear;

    属性合写:
    	 transition: all 1s linear 0.5s;

    备注:
    	  1. 必须设置动画执行时间
    	  2. 必须设置动画属性transition-property
    	  3. 没有顺序的要求

动画