![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
宁长风
白天coder,晚上reader
展开
-
css字体渐变色
font-weight:600;font-size:25px;background-image:-webkit-linear-gradient(bottom,#676867,#EFEFEF);/* background-image:-webkit-linear-gradient(bottom,red,#ff5f60,#f0c41b); */-webkit-text-fill-color:transparent;-webkit-background-clip:text;原创 2021-05-07 16:56:20 · 132 阅读 · 0 评论 -
css样式实现:超出一行省略号,超出多行省略号
一行:overflow: hidden;white-space: nowrap;text-overflow: ellipsis;多行:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; // 想要几行这里写相应数字即可-webkit-box-orient: vertical;有用点赞,收藏哦~~原创 2021-04-28 12:12:18 · 233 阅读 · 0 评论 -
font属性简写顺序
font: font-style | font-variant | font-weight | font-size | line-height | font-family;font-style(字体样式): normal(正常)、italic(斜体)或oblique(倾斜);font-variant (字体变化): normal(正常)或small-caps(小体大写字母);font-weight (字体浓淡): 是normal(正常)或bold(加粗)。有些浏览器甚至支持采用100到900之间的数字原创 2021-04-26 08:54:04 · 3682 阅读 · 0 评论 -
rpx记录使用
rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。开发者可以通过设计稿基准宽度计算页面元素 rpx 值,设计稿 1px 与框架样式 1rpx 转换公式如下:设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx换言之,页面元素宽度在 uni-app 中的宽度计算公式:750 * 元素在设计稿中的宽度 / 设计稿基准宽度...原创 2021-04-20 17:00:30 · 153 阅读 · 0 评论 -
为什么overflow:hidden可以解决样式坍塌
<div class="fa"> <div class="son"></div></div>.fa{ width: 300px; height: 300px; background: red;}.son{ width: 100px; height: 100px; background: blue; margin-top: 50px;}想要的是这样的,事实上是这样的解决的方法有原创 2021-04-02 12:03:53 · 526 阅读 · 0 评论 -
饿了么ui,element-ui,el-table列表线不齐
这样:/deep/.el-table th.gutter { display: table-cell !important}加上样式即可原创 2020-11-15 23:02:19 · 399 阅读 · 0 评论 -
vue过度动画基础,结合animate.css库使用
先附上vue官方文档,基础部分有需要的朋友自己看下:https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E5%8A%A8%E7%94%BB如果没看懂官方文档的,可以再看下我改的小demo:这部分已熟悉的可以跳过这一段,看最下面的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v原创 2020-11-07 22:39:59 · 257 阅读 · 0 评论 -
table中的th,td宽度设置无效
// 给table设置table-layout: fixed;table{ table-layout: fixed;}原创 2020-10-26 14:40:14 · 4092 阅读 · 0 评论 -
遍历出来的div(标签)部分不可点击或不触发事件,除了通过事件判断,还可以使用Css3中的ponter-events属性
遍历出来的标签部分不可点击或不触发事件:一、js事件处理方式<div v-for="item in lists" :key="item.id" @click="judgeClick(item)"></div>methods: { judgeClick(item) { if(item.threshold) { // threshold一个变量判断是否可点击 // 符合条件触发事件 } else { // 不符合条件处理 } }}二、c原创 2020-10-20 12:01:14 · 473 阅读 · 0 评论