![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
Apeng_0919
这个作者很懒,什么都没留下…
展开
-
文章长按复制(富文本内容也可实现)
p{ text-indent: 2em; //首行缩进两个字符 user-select: text; -webkit-user-select: text;}原创 2021-12-29 11:15:48 · 428 阅读 · 1 评论 -
css 内容超出固定行数显示为省略号
overflow: hidden;-webkit-line-clamp: 2; //限制行数text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;原创 2021-12-23 14:59:12 · 542 阅读 · 0 评论 -
css自定义虚线(可设置虚线间隔)
.line { width: 2rpx; height: 100%; background: linear-gradient(to bottom, #9E9E9E 0%, #9E9E9E 50%,transparent 50%); background-size: 2rpx 12rpx; background-repeat: repeat-y;}效果图原创 2021-09-29 10:37:34 · 2504 阅读 · 0 评论 -
css 一句代码教你实现毛玻璃效果(背景虚化)
在ios上会经常见到毛玻璃效果,这次需求也碰到了要在底部导航栏实现毛玻璃效果,类似于这样的效果首先想到了css3中的filter的blur属性,但是直接用这个会发现这样的情况,内容文字也会模糊于是在文字下面的背景加入模糊效果现在文字没有模糊了,但是背景的边缘还是模糊的,与我们想要的效果还是有偏差,百度了全网都没办法结果,于是想到在b站上找找,没想到真的实现了,并且就一句代码backdrop-filter:blur(50rpx);-webkit-backdrop-filter.原创 2021-09-24 10:12:37 · 1206 阅读 · 0 评论 -
uniapp 自定义底部导航栏
在做项目时,经常遇到在现有的框架中无法实现UI图上的样式,比如说将底部导航栏的字体在选中状态下变为渐变色,在浏览器上可以直接修改css样式,但是运行到真机时才发现根本不生效,查阅官方文档才发现app端的根本不支持这些属性更改下面是我在项目中做底部导航栏的过程1.首先是用的官方的底部导航栏,具体可以看我的这篇文档https://blog.csdn.net/weixin_50606255/article/details/116270949在用这个底部导航栏时,就无法更改字体颜色为渐变色(app端)原创 2021-09-02 10:32:46 · 17292 阅读 · 12 评论 -
前端如何引入外部字体
作为前端应该都会遇到一个问题,在做界面UI时,常常会有些字体的样式跟设计图的样式不同,即使代码一样,通过和同事小伙伴百度,发现浏览器并不支持某些字体,是需要从外部引入的,下面简单记录一下自己的如何实现的不同的字体样式的:1.将外部字体下载放在存放静态资源的文件夹中,我是直接问UI设计师要的字体文件2.可以直接放在App.vue中全局使用,我是创建了一个scss文件专门用来引入字体@font-face{ font-family: "Bahnschrift-BoldSemiCond.原创 2021-08-19 10:54:48 · 2608 阅读 · 1 评论 -
js如何让段落首行缩进2个字符
内容:<p>1.sjfprokfoprkcpdpl[orpofddefrdhfyjjua[oejojdksjfidjihuagyedgbjhbzuhjygeduk</p><p>2.sjfprokfoprkcpdpl[orpofddefrdhfyjjua[oejojdksjfidjihuagyedgbjhbzuhjygeduk</p>css设置:p{ text-indent: 2em;}这里的单位为em,em是相对单位不是绝对单位。原创 2021-07-01 17:57:01 · 5549 阅读 · 0 评论 -
css 渐变色文字
background-image: -webkit-linear-gradient(right, green, yellow);/* 规定背景绘制区域 */-webkit-background-clip: text;/* 将文字隐藏 */-webkit-text-fill-color: transparent;ps:-webkit-linear-gradient(渐变方向,渐变颜色1,渐变颜色2,...)效果如下:...原创 2021-04-29 17:27:53 · 67 阅读 · 0 评论