css实用小技巧

用户8260795301906
113 阅读5分钟

1.修改输入框占位符的样式

input::-webkit-input-placeholder {
    color: #fff
    font-size: 20px
}

2.使用:not选择器

下面例子表示不选择最后一个li元素，其他的li元素都设置color为#fff

li:not(:last-child){
    color: #fff
}

3.letter-spacing

设置文本字符的间距，如果设置为正值会导致字符分隔得更远，是负值就会使字符更靠近

   span{
       //默认值
       letter-spacing: normal
       letter-spacing: 3px
   }

4.text-transform

设置文本字符的大小写，capitalize表示首字母大写，uppercase表示全大写，lowercase表示全小写

   span{
       text-transform: capitalize
   }

5.双背景图

我们平常都是给一个元素设置一种背景图，但是有时候设计师出的图可以有几个背景图，我们可以使用容易想到的绝对定位设置z-index来控制背景图的摆放位置以及层叠，但是有点麻烦

这时候我们可以使用多个背景图来解决,写法也很简单，只需逗号隔开就行(适用于背景图的各种属性) 实际应用中我经常遇到的是，background-position，背景图位置，如下代码表示第一个背景图位于顶部居中，第二个背景图位于底部居中

其次还有一个需要注意的点就是，写在前面的背景图url(./image1.png)优先级比第二个背景图url(./image1.png)高，简单来说就是显示的优先级更高

   .box{
       backgrouned-image: url(./image1.png), url(./image1.png)
       background-repeat: no-repeat, no-repeat
       background-position: center top , center bottom
   }

6.css画虚线

这里使用了css的 repeating-linear-gradient()属性，连续动态渐变和linear-gradient()都是属于线性渐变，除了线性渐变之外还有径向渐变以及锥形渐变。下面我将分别介绍这三种渐变

（1）线性渐变：linear-gradient()，repeating-linear-gradient()，通过指定的两种颜色或多种颜色，可以使这些颜色沿着一条直线进行颜色进行过渡达到渐变的效果，在介绍线性渐变之前我要先补充一下关于线性渐变方向的知识：

   background: linear-gradient(#fff 0px, #ccc 500px);

我们设置渐变方向通常有两种方法：

  1. 使用角度：你可以在repeating-linear-gradient函数中指定一个角度值来设置渐变的方向。例如，45deg会创建一个从左下角到右上角的渐变，这个角度是相对于竖直线的，正值表示顺时针旋转，负值表示逆时针旋转（默认角度是0）。例如：

CSS

background: repeating-linear-gradient(45deg, #e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
  1. 使用关键词：你也可以使用一些预定义的关键词来设置渐变的方向。这些关键词包括to top、to bottom、to left和to right。例如，to top会创建一个从下到上的渐变。例如：

linear-gradient: 表示产生的渐变不重复，如何理解不重复，请看如下代码：

   .contain1 {
        height: 500px;
        width: 1000px;
        background: linear-gradient(#fff 0px, #3f87a6 300px, #ccc 500px);
  }

image.png

创建一个contain1容器，设置了线性渐变不重复，默认渐变的方向是从上到小，所以整个渐变的过程是从初始颜色#fff从开始位置也就是容器顶部开始，向下到了300px的时候颜色变为#3f87a6，这中间的过程是渐变，最后到达底部颜色变为#ccc（最后一个颜色没有写位置那么默认是终点的位置）其中的过程也是渐变，为什么这里我要强调其中的过程是渐变呢？请看如下代码

   .contain2 {
        height: 500px;
        width: 1000px;
        background: linear-gradient(#3f87a6 0px, #3f87a6 300px, #ccc 300px, #ccc 500px);
  }

image.png

观察这里的设置和上面css样式的区别，contain2样式每种颜色的开始和结束位置都是相同的颜色(#fff 0px, #fff 30px)，这就意味着没有过渡的空间，所以你看到的是明确的颜色块，而不是渐变。而contain1只设置了开始的颜色，结尾就是下一个颜色的开始（#fff 0px, #3f87a6 30px），所以就产生了颜色的渐变，所以当我们写渐变的时候有时候发现写完样式之后看不见渐变，一定要检查我们写的样式是不是开始和结束位置都是相同的颜色

repeating-linear-gradient: 线性渐变重复，我们直接看下面的例子：

  .contain3 {
    height: 500px;
    width: 1000px;
    background: repeating-linear-gradient(#3f87a6 0px, #3f87a6 30px, #ccc 30px, #ccc 50px);
  }

image.png

有时候我们会遇到设计师涉及很多类似上图渐变的情况，这里就要使用到重复线性渐变了，上述代码的意思就是当我们在50px以#ccc结尾的时候，渐变还不结束因为contain3的高度远大于50px，所以我们继续按照先前的颜色进行渐变，举个例子，50px位置颜色为#3f87a6的开始位置，然后依次类推，最后就达到这个效果。

如果我们要画虚线可以写出以下代码：

 .contain1 {
    height: 10px;
    width: 1000px;
    background: repeating-linear-gradient(90deg, #ccc 0px, #ccc 30px, #fff 30px, #fff 50px);
  }

image.png

7.css换行

8.flex布局换行之后如何设置换行之后的边距

.flex-item设置margin-bottom:-15px; 然后在flex容器设置margin-bottom: -15px来抵消最后一行的margin-bottom效果，就可以起到flex换行之后不进行一些其他复杂的操作来实现换行之后的上下边距。但是缺点是父元素不能再根据外部的位置而设置margin-bottom也就是说margin-bottom只生效一次。

avatar
文章
阅读
粉丝