随笔分类 -  css篇

css实现鼠标滑过提示文字
摘要：第一种：鼠标滑过图片，提示文字，如图： <div v-if="talentCardNum && talentCardNum >0"> <img @mouseenter="choice(1)" @mouseleave="choice(0)" class="box_time_icon" :src="ho 阅读全文
posted @ 2023-12-12 13:47 IT小姐姐 阅读(917) 评论(0) 推荐(0)
css3属性之 text-overflow:ellipsis
摘要：语法： text-overflow:clip | ellipsis 默认值为clip 不显示省略标记 clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。 ellipsis:当对象内文本一处时显示省略标记(...)。 一、常见的单行文本溢出显示省略写法： text-overflow: 阅读全文
posted @ 2023-09-11 17:22 IT小姐姐 阅读(131) 评论(0) 推荐(0)
css防止图片挤压变形 object-fit: cover
摘要：img{ width:200px; height:100px; object-fit: cover; } 该属性会对图片保留原始比列，多余的会被裁剪。 添加该属性会适应指定容器的高度与宽度。 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等 语 阅读全文
posted @ 2023-09-11 10:17 IT小姐姐 阅读(687) 评论(0) 推荐(0)
css实现 h5滑动时隐藏滚动条
摘要：.menus{ margin: 10px 0 ; margin-left: 18px; display: flex; flex-wrap: nowrap; overflow-x: auto; } .menus::-webkit-scrollbar { display: none; width: 0 阅读全文
posted @ 2023-09-07 19:11 IT小姐姐 阅读(469) 评论(0) 推荐(0)
css处理渲染的图片变形问题：object-fit: cover
摘要：object-fit: cover完美解决！~ 阅读全文
posted @ 2022-05-20 09:07 IT小姐姐 阅读(105) 评论(0) 推荐(0)
css images图片铺满 不变型 以及头像裁剪 属性
摘要：一，图片的引入 background:url(img_flwr.gif); background-repeat:no-repeat; //平铺 二，图片的大小不不变形 background-size:cover; 三，上传的头像裁剪 阅读全文
posted @ 2022-03-11 16:12 IT小姐姐 阅读(752) 评论(0) 推荐(0)
css实现滤镜效果（背景图模糊）
摘要：模糊实例 图片使用高斯模糊效果： img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); } css语法： filter: none | blur() | brightness() | contr 阅读全文
posted @ 2021-09-08 10:37 IT小姐姐 阅读(380) 评论(0) 推荐(0)
css样式实现平行四边形
摘要：强大的css样式实现平行四边形： 啥也不说了，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met 阅读全文
posted @ 2021-07-12 17:05 IT小姐姐 阅读(287) 评论(0) 推荐(0)
html排版，样式
摘要：<style> .box{ width: 600px; height: 800px; background-color: rgb(235, 233, 233); } .title{ width: 580px; height: 50px; line-height: 50px; text-align:  阅读全文
posted @ 2021-06-07 14:11 IT小姐姐 阅读(358) 评论(0) 推荐(0)
overflow:scroll修改样式
摘要：当overflow :scroll 出现滚动条后，默认的滚动条样式太丑了，不是我们想要的，那么我们来修改一下吧！~　话不多说，直接上代码 /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; } /*定义滚动条轨道 内阴影+圆角*/ 阅读全文
posted @ 2021-06-03 16:29 IT小姐姐 阅读(667) 评论(0) 推荐(0)
flex布局
摘要：flex 布局的基本概念 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。 我们说 flexbox 是一种一维的布局，是因为一个 阅读全文
posted @ 2021-06-01 16:28 IT小姐姐 阅读(67) 评论(0) 推荐(0)
css样式表,选择器，伪类选择器
摘要：CSS定义 CSS：Cascading Style Sheet（层叠样式表） 选择器 { 属性名: 属性值; } CSS样式表 （1）三种样式表使用 ·1> 内联样式 <div style = 'width:100px ;height:100px'></div> `2> 内部样式 <style ty 阅读全文
posted @ 2021-05-06 13:26 IT小姐姐 阅读(67) 评论(0) 推荐(0)