CSS3
文章平均质量分 51
CSS3
H.F_0331
这个作者很懒,什么都没留下…
展开
-
CSS3渐变效果
1、线性渐变多个终止色<template> <div> <div class="more_color"></div> <div>多个终止色</div> </div></template><style> .more_color{ background: linear-gradient(to right, red,原创 2021-06-24 15:59:23 · 98 阅读 · 0 评论 -
图片循环轮播
图片循环轮播效果演示直接上代码<template> <div id="slider"> <div class="window" @mouseover="stop" @mouseleave="play"> <ul class="container" :style="containerStyle"> <li> <i原创 2021-02-05 17:20:11 · 176 阅读 · 2 评论 -
div模块边框中间添加文字(边框线在文字两边横穿文字)
div模块边框中间添加文字(边框线在文字两边横穿文字)需求图如下:其他三个边框可通过设置border完成,包含文字的一边可以分布实现:左边线 + 文字 + 右边线html:<div class="pop"> <div class="pop_title"> <span class="line_left"></span> <span class="title">控制器主网络配置</s.原创 2021-02-05 15:53:33 · 4178 阅读 · 0 评论 -
VUE列表和表格滚动显示
VUE列表和表格滚动显示自动滚动主要注意三个变量:1,要显示的滚动区域,2,滚动时间,3每次滚动的位移量滚动效果主要是根据transition样式进行设置: transition: width 2s; 第一个参数是指方向,第二个是移动时长。再通过数据的需求设置每次需要移动的距离,可视区域外的元素遮盖(overflow:hidden),最后在设置定时器定滚动就好。列表 <template>部分<ul class="dper_list_ul"> <l原创 2020-08-20 16:20:36 · 1686 阅读 · 0 评论 -
CSS段落文字只显示一行,超出部分显示省略号,鼠标悬浮显示全部段落内容
CSS段落文字只显示一行,超出部分显示省略号,鼠标悬浮显示全部段落内容1. 给段落设置属性.longlinedots{ max-width: 900px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}max-width: 900px; // 设置容器最大宽度white-space: nowrap; // 设置段落文本不换行(不换行才有可能行溢出);overflow: hidden; //原创 2020-07-06 17:36:57 · 5411 阅读 · 0 评论 -
VUE模块滚动条实现鼠标进入显示,移除隐藏
VUE模块滚动条实现鼠标进入显示,移除隐藏设置模块样式,overflow设置为hidden.dper_table{ margin-top: 18px; margin-bottom: 10px; height: 90%; overflow-y: hidden; //关闭滚动条 overflow-x: hidden; //关闭滚动条 }给该模块样式设置伪类 :hover ,在伪类中设置需要悬浮显示的滚动条为auto原创 2020-06-30 16:20:22 · 1993 阅读 · 0 评论 -
table列内容超出显示省略号
element-ui 和iview的table列内容超出部分省略并悬浮提示1. element ui element表格中在列标签中设置属性show-overflow-tooltip值为true<el-table-column :show-overflow-tooltip="true"></el-table-column>2.iviewiview在列定义中使用render函数调整表格行样式{ title: '报警信息', key: 'alarmIn原创 2020-06-30 15:38:37 · 461 阅读 · 0 评论