你不知道的css | 邵预鸿|前端开发技术笔记

scroll-behavior

scroll-behavior 属性规定当用户单击可滚动框中的链接时，是否平滑地（具动画效果）滚动位置，而不是直线跳转

浏览器支持

属性值

值	描述
auto	默认值。允许在滚动框内的元素间直接跳转的“滚动效果”。
smooth	允许在滚动框内的元素间平滑的“滚动效果”。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性	Chrome	IE	Firefox	Safari	Opera
scroll-behavior	61.0	79.0	36.0	14.0	48.0

background-image线性渐变

css3渐变是一张图？还是颜色?

渐变是一张图

用法

background-image: linear-gradient(to right/角度，颜色 30%[从容器的30%开始填充]，颜色2 50%);
background-image: linear-gradient(to left top,rgb(0, 0, 255,.8),rgb(255, 0, 0,.2),rgb(255, 255, 0,.3)); //left top === -45deg

background-image: linear-gradient(red 50px,blue 100px,yellow 150px);

0-50px 纯红色， 50-100px 红色和蓝色渐变， 100px-150px 蓝色和黄色渐变区，150px之后纯黄色

background-image: repeating-linear-gradient(-45deg,#fff 0px,#fff 10px,#000 10px,#000 20px);

#fff 0px,#fff 10px, 0-10px白色与白色渐变

#000 10px,#000 20px 10px-20px黑色与黑色渐变

即可实现黑白相间效果

background-image径向渐变

1	background-image: radial-gradient(shape size at position, start-color, ..., last-color);

值	描述
shape	确定圆的类型:ellipse (默认): 指定椭圆形的径向渐变。circle ：指定圆形的径向渐变
size	定义渐变的大小，可能值：farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值：center（默认）：设置中间为径向渐变圆心的纵坐标值。top：设置顶部为径向渐变圆心的纵坐标值。bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, …, last-color	用于指定渐变的起止颜色。

一个div元素使用css画太极

.taiji{
  width: 400px;
  height: 400px;
  border: 1px solid red;
  margin: 20px 0;
  border-radius: 50%;
  background-image: linear-gradient(to right,#000 50%,#fff 50%);
  position: relative;
}
.taiji:before{
  content: '';
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 0px;
  margin-left: -100px;
  background-image: radial-gradient(circle,#000 50px,#fff 50px);
}
.taiji:after{
  content: '';
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: 0px;
  margin-left: -100px;
  background-image: radial-gradient(circle,#fff 50px,#000 50px); /**50px之前是纯白色   50px - 50px黑白渐变   50px是纯黑色 **/
}

光斑加载动画

透明度0-1，1-0，实现高亮部分，移动background-position实现光斑移动

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100vh;
            background-color: #000;
            text-align: center;
        }
        h1{
            margin-top: 100px;
            display: inline-block;
            font-size: 100px;
            color: rgba(255,255,255,.3);
           
            background-image: linear-gradient(98deg,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100px,rgba(255,255,255,0) 200px);
            background-clip: text;
            -webkit-background-clip: text;
            background-position: 0 0;
            animation: move 1s linear  infinite;
        }
        @keyframes move {
             from{
                background-position: 0 0;
             }
             to{
                background-position: 790px 0;
             }
        }
    </style>
</head>
<body>
    <h1>正在努力加载中...</h1>
</body>

css媒体查询

<link href="./style.css" ref="stylesheet" media="value"> 只在某种情况下有作用

screen	计算机屏幕（默认）。
tty	电传打字机以及类似的使用等宽字符网格的媒介。
tv	电视机类型设备（低分辨率、有限的滚屏能力）。
projection	放映机。
handheld	手持设备（小屏幕、有限带宽）。
print	打印预览模式/打印页面。
braille	盲人点字法反馈设备。
aural	语音合成器。
all	适用于所有设备。

@media screen and(width:800px) {…..} 800px宽度时使用的样式
@media screen and(min-width:800px){……..} 大于等于800px时使用的样式
@media screen and (max-width:800px){…..} 小于等于800px时使用的样式
@media screen and (max-device-width:800px){…..} 设备物理像素，只要为了兼容手机时用
@media only screen and (max-device-width:800px){…..} only是为了兼容性，高版本的浏览器可写可不写，只是为了兼容
@media screen and (max-device-width:800px),(min-device-width:1600px){…..} 小于等于800px 或者大于等于1600px
@media not screen and (max-device-width:800px){…..} 取反，不是彩色屏幕并且最大设备宽度800px

flex布局实现一左一右块

 <style>
       *{
           margin:0;
           padding: 0;
       }
       ul,li{
           list-style: none;
       }
       ul{
           border:1px solid red;
           box-sizing: border-box;
           height: 200px;
           display: flex;
           align-items: center;
       }
       ul>li{
           width: 30px;
           height: 30px;
           background-color: blue;
           color: #fff;
           text-align: center;
           
       }
       ul>li:not(:last-child){
           margin-right: 20px;
       }
   </style>
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

　在做一个列表的时候，单个Flex容器内有三个内联的靠右对齐的按钮，效果如图：

　　而我想让红色按钮靠左，而另外两个蓝色按钮保持靠右

　　方法A：

　为红色按钮单独加上：flex: 1

　　此效果的原理是：利用flex:1，动态填充宽度

　　方法B：

　　这个时候我们可以为红色按钮单独加上：margin-right : auto；

　　效果如图：

　　此效果的原理是：

　　margin-right 不设置的话默认是0，父容器width 定宽之后，margin-right取值为 auto ，

　　则自动占据了剩余的全部宽度 ——《css权威指南》

css选择前几个元素或者后几个元素

操作前4个元素

<style type="text/css">
			#nth-test div:nth-child(-n + 4) {
				background-color: red;
			}
		</style>

操作元素3之后的元素

1
2
3

#nth-test div:nth-child(n + 3) {
	background-color: red;
}

text-decoration: line-through wavy red; ** //三个参数，*** 1：下划线、删除线； 2：wavy代表波浪线; 3:线条颜色*

给文字加边框

通常，border 属性是为 HTML 元素加上边框的不二选择，但这个边框是基于盒子模型，即呈现在元素的四周，无法对盒子内的文字生效。

假设我想让文字带有 1px 的黑色边框，首选 text-shadow ，它能设置多个文字阴影，从视觉上达到边框效果。

HTML 代码如下：

1 2	<div class="text">I Like CSS World</div> 复制代码

CSS 代码很简单，将 text-shadow 的 blur 值设为 0，分别向右下、左上、右上、左下方向偏移 1px.

.text {
  color: white;
  font-size: 4em;
  text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px
      1px 0px black;
}

CodePen 在线预览地址

text-shadow 兼容所有现代浏览器，但仔细观察，会发现边缘处有锯齿状，毕竟是模拟实现，效果差强人意。

第二种方法选用 -webkit-text-stroke 属性，字面意思就是为文字加上边框。

它是 -webkit-text-stroke-width 和 -webkit-text-stroke-text 两个属性的缩写形式。

.text {
  color: white;
  font-size: 4em;
  -webkit-text-stroke: 1px black;
}
复制代码

CodePen 在线预览地址

-webkit-text-stroke 使用简单，效果出色。

但相信你也注意到了 “webkit”，一般带有前缀的属性兼容性较差，又或非 CSS 官方认定的属性（浏览器厂商自己实现），最好不要在生产环境使用它。

栏目

column-count:2 将文字分成2列展示
column-gap:40px 栏目之间间隔为40px
column-rule:1px solid red; 栏目之间的分割线