随笔分类 - css
css相关
摘要：- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator .box{ width: 500px; height: 500px; border-image-
阅读全文
摘要：- font-size: 32px; color: #00FFFE; cursor: pointer; background: linear-gradient(180deg, #E6EEFE 0%, #3DF5E6 100%); background-clip: text; -webkit-back
阅读全文
摘要：- text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0; -
阅读全文
摘要：- 在编写 CSS 时，有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如，如果您想对标题中的 <b> 标签进行颜色调整，我们应该都写过这样的代码： h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b { color: hotpink; }
阅读全文
摘要：- 最近写一个组件，圆形开关。 在组件封装时被要求通过设置一个size属性来控制圆形的大小。且随屏幕自适应。 size属性要求是数字，我们把它的单位当成px。要做到随屏幕自适应，需要转换为其它的单位 以下列出3中方法： 方法1：将size转换成vw （最简单有效） 方法2：将size转换为rem （
阅读全文
摘要：- 当做一个滚动条元素，不想让某个元素跟着滚动条一起滚动时，可以用 position: sticky;样式，使得元素，固定位置，不随着滚动条滚动； :<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA
阅读全文
摘要：- background-image:-webkit-linear-gradient(right,#4AF6BA,#1CB4F8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background: -web
阅读全文
摘要：- css的伪类有：::before、::after、::first-letter、::first-line、::selection ::before、::after 用于在元素之前之后插入内容。 ::first-line、 ::first-letter用于改变元素 首行、首字母样式。 ::sele
阅读全文
摘要：- 1、用dom元素遮挡，想挡几个挡几个，这个就不说了。 2、用css3渐变背景： background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction：用角度值指定渐变的方向（或角度）。 col
阅读全文
摘要：。 css中variables：css变量 平时没少用sass、less、stylus预编译语言，里面的变量很常见，但都需要前把变量都以静态的方式定义好才能使用，然后编译完后生效，无法和js交互。 variables提供了css与js交互的机会！ 一、css变量的定义及使用方式： /* 定义：--开
阅读全文
摘要：。 将外面的容器和本容器都加了cursor:pointer;但是都出现不了小手。 然后听网友的，把此input设置font-size:0;在chrome浏览器可以生效 。
阅读全文
摘要：目前遇到个需求，需要在伪类中显示icon图，于是就想到了unicode图标 那么怎么将unicode图标引入项目呢？ 进入阿里矢量图库： 选一个图标，加入购物车，将图标加入项目 进入项目： 选择unicode下载到本地： 在assets文件夹下创建fonts文件夹；将如下文件复制进去： 在main.
阅读全文
摘要：html： <div data-placeholder="模拟placeholder"></div> css： /*为空时显示 element attribute content*/ div:empty:before { content: attr(data-placeholder); /* ele
阅读全文
摘要：。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen
阅读全文
摘要：:hover和:focus显示浮层 hover是鼠标晃过 focus是元素聚焦时 +：紧邻的下一个兄弟选择器 ~：所有的后面兄弟选者器 css img{ visibility: hidden; position: absolute; transition: visibility .2s; /** 设
阅读全文
摘要：。 在移动设备上如手机和平板横屏会导致字体变大，-webkit-text-size-adjust: 100%可以禁止字体变化。 -webkit-text-size-adjust: 100%; 简单改变谷歌内核浏览器滚动条： ::-webkit-scrollbar { width: 4px; } ::
阅读全文
摘要：上一篇我们详细介绍了grid布局，这一篇我们总结一下，方便查询： 定义grid容器的方式： display: grid; 或者 display：inline-grid;//行内块元素 容器属性： grid-template-columns：定义列宽 grid-template-rows：定义行高 g
阅读全文
