随笔分类 -  css基础学习

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

点击右上角即可分享
微信分享提示