随笔分类 - css
css分类
摘要：一、box-shadow问题探究 box-shadow 在MDN定义以及详解： box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性让你可以对几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影的z-ordering 和多个
阅读全文
摘要：opacity: 0.5; //会导致文字透明，取值从 0 到 1background-color:rgba(0,0,0,0.5); 使用rgba设置背景色 background-color:rgb(0 0 255 / 0.3); 使用rgb设置背景色 RGB颜色值和十六进制颜色码转换： https
阅读全文
摘要：<div class='star-con__tabBox'> <span class='star-con__tab'></span> <span class='star-con__tab'></span> <span class='star-con__tab'></span> <span class
阅读全文
摘要：设置右边元素flex：1，当右边元素宽度超过父元素时，会造成右边宽度溢出。 右边多设置一个width:0或overflow:hiddlen后样式正常。 为什么设置flex: 1可以实现宽度自适应？ 这与flex属性的赋值语法有关，CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中
阅读全文
摘要：1.父元素display:flex布局下的子元素宽度无效 因为设置了display: flex; 导致block布局变成了flex布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时宽度会比实际宽度小，所以如果想要在已经设置了flex布局的基础上，再进行子元素宽
阅读全文
摘要：html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:DXImageTransf
阅读全文
摘要：<style> body { margin: 0; padding: 0; } .items { font-size: 0; } /* .items{ display: flex;flex-wrap: wrap;} */ .item { display: inline-block; width: 3
阅读全文
摘要：参考：https://blog.csdn.net/milijiangjun/article/details/79723013
阅读全文
摘要：1、正常情况下： width :给块级元素/行内块 元素设置固定的宽度，或者固定百分比的宽度。 min-width: 当盒子内部元素宽度小于 min-width的值时，盒子宽度为 min-width的值，当盒子内容宽度大于 min-width的值时，盒子随着内容的增加而被撑大，没有上上限，但是 盒子
阅读全文
摘要：背景透明，文字不透明的解决方法： 为元素添加一个绝对定位的子元素，设置大小和该元素一样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。 使用CSS3新属性rgba。 text-decoration:underline; 文字加下划线
阅读全文
摘要：1、语法 div{box-shadow:0 0 1px #000 inset;} 代表边框间距靠左0 靠上0 和1px阴影范围 阴影颜色为黑色（#000），有inset 代表框内阴影 ，不带inset 代表框外阴影。 注意：box-shadow:0px 0px 1px #000第1个值为0时，代表左
阅读全文
摘要：1.字体大小（都用双数） 36px 30px 24px 22px (28px,26px 少用) 2.字体颜色 #999 #666 #333 3.灰色背景 #eee 4.左右边框 24px或20px 5.字体 默认 微软雅黑 安桌 是 思源黑体 6.手机常用尺寸 底部导航条：98px 登录按钮：88p
阅读全文
