随笔分类 -  CSS

微信小程序中使用svg字体图标教程 ——图解三步，很清晰
摘要：小程序中想使用字体图标其实很简单：第一步：首先在阿里巴巴矢量图库https://www.iconfont.cn/search 里面下载你想要的小图标： 下载时选择svg下载： 第二步：打开 https://icomoon.io 把你刚刚下载的svg拖拽到这里： 第三步：在线转换base64编码字体， 阅读全文
posted @ 2022-02-24 14:11 祭·司 阅读(1583) 评论(0) 推荐(0)
css背景渐变色: 标题两边渐变画线效果
摘要：实现如图效果 利用背景图属性渐变色控制画线颜色,通过背景图大小属性设置线条的粗细,文字盒子设置背景覆盖部分线条以下是实现代码 1 html 内容 <template> <div class="notice"> <span class="notice_content"> 公告 </span> </di 阅读全文
posted @ 2021-12-20 09:57 祭·司 阅读(376) 评论(0) 推荐(0)
flex 布局 超过长度自动换行
摘要：display: flex; justify-content: space-between; flex-flow: wrap; 阅读全文
posted @ 2021-12-01 11:19 祭·司 阅读(1385) 评论(0) 推荐(0)
通过css实现div中文本内容显示N行，超过部分用省略号显示
摘要：一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二、div内显示N行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; 阅读全文
posted @ 2021-04-08 09:29 祭·司 阅读(988) 评论(0) 推荐(1)
微信小程序 view文字水平垂直居中
摘要：微信小程序 view文字水平垂直居中 常用的居中对齐方式有很多种例如： text-align:center; align-items:center; justify-content: center; margin: auto; #子容器在父容器中居中 但是在view中的文字对齐却不能简单的使用tex 阅读全文
posted @ 2021-03-18 09:00 祭·司 阅读(2615) 评论(0) 推荐(0)
解决父元素display:flex布局下的子元素宽度被压缩问题
摘要：解决父元素display:flex布局下的子元素宽度被压缩问题 因为设置了display: flex; 导致block布局变成了flex布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时宽度会比实际宽度小，所以如果想要在已经设置了flex布局的基础上，再进行子 阅读全文
posted @ 2021-03-12 09:29 祭·司 阅读(4270) 评论(0) 推荐(0)