![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Css
丶扁扁的糖是扁的
一个喜欢记录的小白写的博客,用来拯救他那不大好的记性。有的是记录,有的是随笔,反正都是用心写的点点滴滴。
展开
-
CSS——两个属性实现dom缩放功能
1、关于 <textarea> 引发的思考因为<textarea>元素是自带缩放功能的,本来想参考它的实现给我要实现缩放的<div>元素添加一个类似的缩放,但是研究了下发现它的缩放好像不是依靠 JS 事件。于是抓了下<textarea>的原生css如下:resize:看到了resize这个关键属性,然后就给我的<div>加上了resize:但是并没有生效。我的<div>没有发生任何改变😟,甚至连鼠...原创 2022-05-23 20:51:07 · 1108 阅读 · 0 评论 -
el-loading使用指令方式时定义背景色、文字、icon,自定义loading动画
指令方式时定义背景色、文字、icon:<div v-loading.fullscreen.lock="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"/>自定义loading动画:.el-loading-spinner { height: 40px; ..原创 2022-04-28 19:37:40 · 2342 阅读 · 0 评论 -
Vue自定义组件——图片放大器,js点击<img>触发图片放大,富文本内图片点击实现放大器效果
富文本内图片点击实现放大器效果,要在不改变<img /> 标签且不添加自定义指令的前提下放大图片,找了下没有找到合适的插件,就自己动手写一个图片放大器组件。设计思路:富文本里的图片,最终应该是呈现这样的状态:<div> <img src="……" /> <div class="content">扁扁的糖是扁的</div></div>给富文本标签添加点击事件;<div @click="preview原创 2022-03-03 09:55:13 · 2384 阅读 · 1 评论 -
Vue <style>使用变量 css使用变量
首先给标签赋值 :style<div :style="cssVar" />computed中定义刚才赋值的变量 computed:{ cssVar(){ const _site = { '--left': 10, '--top': 20, } return _site }, },最后在 <style> 中使用var()函数读取变量即可,该函数可以使用第二个参数,表示变量的默认值。@k原创 2021-11-30 19:29:58 · 3142 阅读 · 0 评论 -
一些html标签,懒的人不喜欢写CSS
为了做比较,默认的文本我添加了字号和颜色<div class="test-label"> <!-- 默认文本格式 --> <div>扁扁的糖是扁的</div></div>.test-label { font-size: 16px; color: #fff;}1、超链接 <a><a>扁扁的糖是扁的</a><a> 标签定义超链接,用于从一张页面..原创 2022-02-24 11:38:30 · 287 阅读 · 0 评论 -
JS CSS 超出字符省略号,获取字符串实际所占长度,显示文字提示tooltip
CSS 超出字符省略号.a{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}JS获取字符串实际所占长度computed: { //计算字符串所占宽度 stringWidth() { return function (string) { const dom = document.createElement('span') //创建一个span dom.st..原创 2022-01-25 14:23:26 · 2059 阅读 · 0 评论 -
关于元素如何显示部分边框线 怎么显示一半的边框线 部分border 画树图的连接线
关于元素如何显示部分边框线怎么显示一半的边框线 || 部分border || 画树图的连接线这里用到 border-image 属性,支持的浏览器Firefox,chrome,Safari,IE不可以。急着做项目的同学,一目了然的代码拿走拿走:.XX{ border-left: 1px solid; border-image: -webkit-linear-gradient(top,transparent 50%,green 50%,green 100%) 1;}.原创 2021-05-22 10:55:21 · 2538 阅读 · 1 评论