随笔分类 - CSS
摘要：效果图： html <div class="box"> <div class="point"></div> <div class="leaf leaf1"></div> <div class="leaf leaf2"></div> <div class="leaf leaf3"></div> <di
阅读全文
摘要：项目中长按删除、长按添加关注等功能是很常见的。但是手机端长按默认是会在周边随便选中文字弹出自带的复制粘贴的操作，所以我们需要禁止掉移动端长按进行复制粘贴的操作。（可以防止内容被复制） *{ -webkit-touch-callout:none; /系统默认菜单被禁用/ -webkit-user-se
阅读全文
摘要：一、通过css设置滚动条 在所有浏览器，滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因，市面上基于webkit内核的浏览器也是很难穷举完。例如有：Google Chrome、Opera（opera最近宣布使用webkit内核了）、360极速浏览器，猎豹浏览器等，搜狗浏览器…
阅读全文
摘要：一、用:valid和:invalid来做表单即时校验 html5丰富了表单元素，提供了类似required,email,tel等表单元素属性。同样的，我们可以利用:valid和:invalid来做针对html5表单属性的校验。 :required 伪类指定具有required 属性的表单元素 :va
阅读全文
摘要：CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。 雪碧图的使用场景 静态图片，不随用户信息的变化而变化。 小图片，容量比较小（2~3k）。 图片加载量比较大。 目的 减
阅读全文
摘要：效果图： text-stroke实现 该属性是一个复合属性，可以设置文字宽度和文字描边颜色 该属性使用很简单：text-stroke:1px #f00;（1px是文字宽度，#ff是文字描边颜色） 本以为该属性的兼容性会及时止住我微微上扬的嘴角，随后逐渐凝固 但出乎意料的是大多浏览器已经开始支持该属性
阅读全文
摘要：（1）display：none 不占空间，不能触发事件 （2）opacity：0 占据空间，可以触发事件 （3）visibility：hidden 占据空间，不能触发事件
阅读全文
摘要：clip 属性剪裁绝对定位元素。 也就是说，只有 position:absolute 的时候才是生效的。 左右宽度相减的值是宽度，上下相减的值是高度。 top right bottom left分别指最终剪裁可见区域的上边，右边，下边与左边。而所有的数值都表示位置，且是相对于原始元素的左上角而言的。
阅读全文
摘要：我们在编写前端代码时，经常会遇到各种各样的形状图形（如：边框对话框，三角形，平行四边形、圆角边框、圆形、四叶草、花瓣等），除了用背景图片（css雪碧图或css精灵图+定位引用）和插入img图片的方法，我们还可以用css边框、圆角（border-radius）、渐变和定位的方法结合使用，绘制各种各样的
阅读全文
摘要：文字带上渐变色，或者说让文字透出图片。这些效果 CSS 属性也可以完成。 方法一、利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现，我们只需要构造出黑色文字，白色底色的文字 div ，叠加上图片，再运用 mix-blend-mode
阅读全文
摘要：前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）、first-child、:last-child、:nth-child()、:n
阅读全文
摘要：效果图： 下拉菜单距离顶部有一定的距离，为了避免鼠标滑到二级菜单的过程中，二级菜单意外收起。可以在二级菜单的外部在包裹一层div，然后二级菜单距离外部包裹的div有一定的距离即可。 .right { display: flex; align-items: center; i { margin: 0
阅读全文
摘要：伪类 伪类更多的定义的是状态，如:hover，或者说是一个可以使用CSS进行修饰的特定的特殊元素，如:first-child 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。 当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。虽然
阅读全文
摘要：前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。 单行文本省略 .ellipsis-line { border: 1px solid #f70505; padding: 8px; width: 400px; ov
阅读全文
摘要：/*iPhone5和iPhone SE*/ @media only screen and (device-width : 320px) and (device-height : 568px) and (-webkit-device-pixel-ratio : 2) { /*code*/ } /* i
阅读全文
摘要：css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。 一、blur(px)高斯模糊 给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊； 不过，blur模糊的缺点是边缘也会模糊不清。不过，在实际的应用中
阅读全文
摘要：input::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */ input:-moz-placeholder{} /* Firefox版本4-18 */ input::-moz-placeholder{} /* Firefox版本19+ */ inpu
阅读全文
摘要：<div class="container goods-info"> <div class="row goods-tags"> <div class="col-md-2 tag-label">选择版本</div> <div class="col-md-10"> <div class="tags-se
阅读全文
摘要：效果图： 方法一 <table> <tr> <th>姓名</th> <th>性别</th> <th>住址</th> <th>电话</th> </tr> <tbody> <tr> <td>张三</td> <td>男</td> <td>深圳龙岗区</td> <td>131313131313</td> <
阅读全文
浙公网安备 33010602011771号