随笔分类 - css基础学习
摘要:了解 渐变:可以显示两种或多种指定颜色之间的平滑过渡。 渐变类型: 线性渐变(向下/向上/向左/向右/对角线) 语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 方向: 1.to + 方位名
阅读全文
摘要:位移:translate translate:参照初始的位置进行移动 语法:transform: translate(水平移动距离, 垂直移动距离); 取值(正负均可) 像素单位数值:px 百分比(参照物为盒子自身尺寸) translate()如果只给出一个值, 表示x轴方向移动距离 单独设置某个方
阅读全文
摘要:文字图标 了解及作用 字体图标展示的是图标,本质是字体。 作用:处理简单的、颜色单一的图片 优点 灵活性:灵活地修改样式,例如:尺寸、颜色等 轻量级:体积小、渲染快、降低服务器请求次数 兼容性:几乎兼容所有主流浏览器 使用方便: 下载字体包 使用字体图标 使用方法 下载字体包 登录(https://
阅读全文
摘要:背景裁剪:background-clip 作用 background-clip:主要用来确定背景的剪裁区域,是针对元素背景颜色,背景图片进行裁剪 语法及属性值 语法: background-clip: border-box / padding-box / content-box ; <div cla
阅读全文
摘要:css水平垂直居中的方法 利用水平对齐和行高 设置text-align和line-height实现单行文本水平垂直居中 实现代码如下: <div class="father"> <div class="son"></div> </div> .father { width: 400px; height
阅读全文