css
码林鼠
致力于知识的传播
展开
-
border-image边框背景不变形九宫格
注意上面76和38的关系,二倍的关系,因为用的是二倍图。在ps中取到76px。原创 2023-01-18 11:32:09 · 318 阅读 · 1 评论 -
grid实现“品”字布局
这种布局通过flex似乎无法实现,所以这里通过grid来实现。原创 2022-09-16 16:06:20 · 225 阅读 · 0 评论 -
原生css变量
:root{ --color:red; --number:12; --size:50px;}#box{ --color:blue;//就近原则 width:300px; height: 100px; overflow-y: scroll; background:var(--color); font-size: calc(var(--number)*2px);...原创 2020-03-09 21:36:09 · 99 阅读 · 0 评论 -
针对ie的css hack
_background 针对<=ie6,也就是这个样式只有<=ie6浏览器有效*background 针对<=ie7background\9 <=10background\0 >=8*html{} <=6*+html{} <=7:root 这个 CSS 伪类匹配...原创 2020-03-10 23:50:49 · 96 阅读 · 0 评论 -
css新特性滚动捕捉,吸附
<div class="main"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div><style l...原创 2020-03-09 17:45:02 · 889 阅读 · 0 评论 -
css报纸模板
<div class="box"> <h1>碧桃</h1> 收款付款是芬兰 </div> .box{ width:600px; height:300px; background:red; overflow: hidden; column-count: 3; column-gap:20px; col...原创 2020-03-10 23:10:42 · 529 阅读 · 0 评论 -
环绕
#shape { width: 100px; height: 100px; clip-path: polygon(0 0, 0 100px, 100px 100px); shape-outside:polygon(0 0, 0 100px, 100px 100px); float:left; background:black;}<div class="main"...原创 2020-03-09 21:26:18 · 79 阅读 · 0 评论 -
css旋转木马
第一步 <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <...原创 2020-03-10 22:56:40 · 121 阅读 · 0 评论 -
css新特性,自定义滚动条
.main::-webkit-scrollbar{ height: 10px;}.main::-webkit-scrollbar-thumb{ background:black; border-radius: 5px;}.main::-webkit-scrollbar-track{ background:#ccc;}原创 2020-03-09 17:48:55 · 145 阅读 · 0 评论 -
css网格
一 <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div&g...原创 2020-03-11 23:50:44 · 71 阅读 · 0 评论 -
less详解
阅读前说明:左窗口为编译前,右是编译成css后。原创 2020-03-19 22:53:43 · 364 阅读 · 1 评论 -
scss详解
编译前.box{ background:red; //只有sass可以,less不行 font:{ size:12px; weight:bold; }}$num:100px;.box4{ width:$num * 3; // height: $num+20em;单位不同无法计算 font:20px...原创 2020-03-19 23:02:34 · 489 阅读 · 0 评论 -
transition过渡
#box{ width: 100px; height:100px; background:red; transition-property:all; transition-duration:.5s; transition-delay:.5s; transition-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1); /...原创 2020-03-09 21:59:39 · 620 阅读 · 0 评论 -
3d动画翻转
+先看效果<view class="mask"> <view class="parent"> <view class="face">点击翻看</view> <view class="back">恭喜您,中奖啦!</view> </view></view>.mask {...原创 2020-02-27 15:17:09 · 142 阅读 · 0 评论 -
input输入框默认背景
在chrome浏览器自动输入时,input就会有背景,字体大小和颜色都会变化,怎么解决?input:-webkit-autofill { transition: background-color 2000s;}input { -webkit-text-fill-color: #fff; caret-color:#fff;}原创 2021-07-22 19:28:11 · 579 阅读 · 0 评论 -
常见兼容性问题
ie6浏览器中,块级元素设置float后,margin不是自己设置的值。解决方案:_display:inline;还有,最小高度有限制。解决方案:overflow:hidden;.content{ width:10px; height: 10px; overflow: hidden; border...原创 2020-04-21 17:05:19 · 406 阅读 · 0 评论 -
两端对齐css实现
通常情况下<view class="parent"> <view>我是码林鼠我是码林鼠</view> <view>我是码林鼠</view> <view>{{name}}</view></view>.parent view{ text-align: justify;}.parent view::after{ content:''; display: inline-block; .原创 2020-12-05 21:02:22 · 208 阅读 · 0 评论 -
每天进步一点点之css
<template> <div id="app"> <p>1</p> <p></p> <p>3</p> <div>4</div> <div>5</div> <div>6</div> <div class="parent"> <input type="te原创 2020-08-23 21:00:28 · 103 阅读 · 0 评论 -
css立方体动画
<div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li&g...原创 2020-03-09 23:21:35 · 85 阅读 · 0 评论 -
h5新标签
<div> <abbr title="world wide web">www</abbr> <iframe src="https://www.baidu.com" frameborder="0"></iframe> <iframe srcdoc="<h1>对方是否</h1>" fram...原创 2020-03-09 22:45:56 · 77 阅读 · 0 评论 -
通过清除浮动来撑开父元素
<div class="main"> <div id="box1"></div> <div id="box2"></div> </div><style lang="scss">.main{ border:1px solid blue; width:220px;}.main:...原创 2020-03-09 22:25:57 · 103 阅读 · 0 评论 -
table表格
<table border cellpadding="10" cellspacing="10" align="right"> <tr> <td rowspan="2" valign="bottom">会发给对方</td> <td>的归属感</td> <td>...原创 2020-03-09 22:21:05 · 76 阅读 · 0 评论 -
css文本样式
#box{ width: 300px; height:300px; background:red; text-indent: 2em;//2em就是font-size的两倍 text-align: justify;//两端对齐 line-height: 1.2;//1.2就是font-size的1.2倍 font-weight: bold;//font-weight只有...原创 2020-03-09 22:12:47 · 91 阅读 · 0 评论 -
background
background-positionbackground-attachment背景图片不会随内容的滚动而滚动body {background-attachment: fixed;}background-clipbackground-origin原创 2020-02-24 15:09:44 · 76 阅读 · 0 评论 -
css控制文本一行省略号 transition动画
.content{ flex:1;//content的父级为display:flex;所以flex:1;的作用是占据剩下的空间 white-space:nowrap;/*不进行换行*/ text-overflow:ellipsis;//省略号 overflow: hidden;//这行也必须要 }.rotate_style{//这是旋转后的样式 transform...原创 2020-02-19 16:11:07 · 249 阅读 · 0 评论 -
ellipsis文本超出,多行显示
.goodsName { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /*第二行显示 ...*/ -webkit-box-orient: vertical;}.detail{ overflow: hidden; text-overfl...原创 2019-11-26 14:42:59 · 233 阅读 · 0 评论