css
关注
分享
扫一扫
祝余、
啥也不会，真难。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
less 自定义函数
vue-cli3以上配置module.exports = {css: { loaderOptions: { less: { javascriptEnabled: true } } } }vue-cli3以下版本// module.rules{ test: /\.less/, exclude: /node_modules/, use: ['style-loader', 'css-loader', { loader:原创 2021-08-25 16:09:38 · 5002 阅读 · 0 评论 -
css 文字渐变
background-image:-webkit-linear-gradient( #F28E26, #FD644F);-webkit-background-clip:text;-webkit-text-fill-color:transparent;原创 2021-04-22 10:08:08 · 130 阅读 · 0 评论 -
scss
继承%card{ border-radius: 20px;}.goods-card{ @extend %card;}原创 2021-02-25 09:45:30 · 135 阅读 · 0 评论 -
CSS3 [attribute*=value] 选择器
设置 class 属性值包含 “test” 的所有 div 元素的背景色：div[class*="test"]{ background: #FFCC00}原创 2021-02-24 16:36:24 · 184 阅读 · 0 评论 -
css设置伪元素层级在父元素下方
实现效果父元素加transform-style: preserve-3d;伪元素加transform: translateZ(-10px);.goods-item{ width: 162rpx; height: 212rpx; border-radius: 32rpx; background: #FFFFFF; border: 4rpx solid #E7CB97; position: relative; transform-st原创 2021-02-22 09:58:02 · 1978 阅读 · 1 评论 -
scroll-view横向滚动
scroll-view需要设置cssscroll-view{ white-space: nowrap;}子元素需要设置行内元素view{ display: inline-block;}原创 2020-11-03 17:02:08 · 1160 阅读 · 1 评论 -
position: sticky
position: sticky定位时，父元素不能设置overflow:hidden原创 2020-10-23 10:15:11 · 159 阅读 · 0 评论 -
css flex
flex: 1 100px; //表示该元素自动填充剩余空间，且最小宽(row)/高(column)100px原创 2020-04-21 22:12:08 · 118 阅读 · 0 评论 -
box-shadow 阴影
上阴影box-shadow: 0rpx 0rpx 20rpx 0rpx #84CF96; // 1.第三个值，控制扩散面积，值越大，面积越大，颜色越淡；// 2.第二个值，以阴影左上角为原点，值为阴影在该坐标轴上的-y轴位置（eg：20px 相当于 relative定位 top:-20px）；// 3.第一个值，以阴影左上角为原点，值为阴影在该坐标轴上的x轴位置 (eg: 20px 相当...原创 2020-04-17 13:50:20 · 277 阅读 · 0 评论 -
overflow隐藏滚动条
div::-webkit-scrollbar{ display: none;}原创 2020-03-05 17:44:10 · 341 阅读 · 0 评论 -
浏览器兼容相关
ie10和11可用例如ie不能正确表现grid 可以在下边重写 .div1{ width: 100%; height: 200px; background: linear-gradient(to right, #e6ffd8, #d8dcff); /* displ...原创 2020-01-15 16:53:56 · 111 阅读 · 0 评论 -
flex部分样式
<div class="div2"> <div class="item bg-red" style="flex-basis: 200px;">item1</div> <div class="item bg-blue" style="flex: 1;">item2</div> ...原创 2020-01-15 13:53:18 · 188 阅读 · 0 评论 -
caniuse npm安装
npm install -g caniuse-cmdcaniuse xxxeg: caniuse grid原创 2020-01-15 10:32:06 · 1256 阅读 · 0 评论 -
移动端设置font-size 和 实际渲染字体大小不一致
*{-webkit-text-size-adjust: none;}转载 2019-12-07 09:42:52 · 1592 阅读 · 0 评论 -
css 背景图片不变形
1、cover 最短边完全显示background: url('') no-repeat top center;background-size: cover;2、container最长边完全显示background: url('') no-repeat top center;background-size: container;...原创 2019-11-30 13:29:41 · 9267 阅读 · 0 评论 -
loading动画
.loading img{ width: 40px; height: 40px; margin-bottom: 10px; animation: load 2s infinite linear; }@keyframes load{ ...原创 2019-11-25 17:08:00 · 154 阅读 · 0 评论 -
自定义ovflow:auto滑块样式
.select-block::-webkit-scrollbar { width: 8px; height: 10px; } .select-block::-webkit-scrollbar-button, .select-block::-webkit-scrollbar-button:vertical { display: ...原创 2019-11-11 17:42:26 · 520 阅读 · 0 评论 -
overflow:auto 自定义样式
.logs-block::-webkit-scrollbar {/*滚动条整体样式*/ width: 8px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}.logs-block::-webkit-scrollbar-thumb{/*滚动条里面小方块*/ border-radius: 10px; box-shadow: inset ...原创 2019-11-09 10:09:58 · 904 阅读 · 0 评论 -
文字禁止选中 css
-webkit-touch-callout: none; /* iOS Safari */-webkit-user-select: none; /* Chrome/Safari/Opera */-khtml-user-select: none; /* Konqueror */-moz-user-select: none; /* Firefox */-ms-user-select: ...原创 2019-11-08 13:55:39 · 198 阅读 · 0 评论 -
img 底部白条
img{ display:block;}原创 2019-11-06 11:22:42 · 292 阅读 · 0 评论 -
ios 去掉textarea内阴影
textarea{ -webkit-appearance: none; appearance: none;}原创 2019-11-01 15:09:19 · 173 阅读 · 0 评论 -
css 一些知识点
[class*=animation-]{}原创 2019-10-24 16:06:26 · 120 阅读 · 0 评论 -
仿网易云音乐app tab栏滑动效果
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>仿网易云音乐...原创 2019-10-24 14:29:34 · 634 阅读 · 0 评论 -
html 图片填充不变形
缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。等于小程序 mode=‘aspectFill’ width: 100%; height: 100%; object-fit: cover;缩放模式，保持纵横比缩放图片，使图片的长边能完全显示...原创 2019-10-19 14:20:15 · 1594 阅读 · 0 评论 -
css 单行 多行文本 多余省略
单行overflow: hidden;text-overflow:ellipsis;white-space: nowrap;多行display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;原创 2019-10-18 16:30:00 · 301 阅读 · 0 评论