css小细节罗列

 

有空时候把一些常见可能不是每一个人都知道的css小细节总结了下，共勉。

1.line-height

众多周知，line-height是行高的意思，咱们时常会使用相似line-height:24px;这样的代码来设置绝对的行高。可是当咱们的需求改变，字体大小变更的时候，可能咱们还须要再次改动行高，那么如今咱们可使用直接设置数字来设置行高,当咱们使用纯数字来设置行高的时候，它相对于的是字体大小的倍数，也就是说下面的h4其实设置的行高也是12*2px就是24px。这样设置的好处是当咱们在改变字体大小的时候，行高会自动进行改变。

p{ font-size:12px; line-height:24px; }
h4{ font-size:12px; line-height:2; }

　

2.backgroud-clip和backgroud-origin

background-clip: border-box|padding-box|content-box;

该属性指定了背景在哪些区域能够显示，但与背景开始绘制的位置无关，背景的绘制的位置能够出如今不显示背景的区域，这时就至关于背景图片被不显示背景的区域裁剪了一部分同样。简单来讲：它指定了背景能够覆盖到哪一个位置。

background-origin: padding-box|border-box|content-box;

该属性指定了背景从哪一个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置，你能够用这个属性在边框上绘制背景，但边框上的背景显不显示出来那就要由background-clip来决定了。简单来讲：它指定了背景从哪一个位置开始展现。

 

3.border-radius

你们都会使用border-radius来制做圆角或者球形状,可是不多有人知道它是能够指定角度的水平和垂直半径，只须要咱们使用 / 来分开两个值。这样的话咱们能够轻松实现一个椭圆形。

.div1{
	width: 200px; 
	height: 150px;
	border-radius: 100px/75px;
	background-color:#000;
}

　　

而且当咱们使用百分比进行值的设置的时候,他会基于元素自身的宽高进行解析，也就是说其实上面的代码能够这么写。

.div1{
	width: 200px; 
	height: 150px;
	border-radius: 50%/50%;
　　　　 /* border-radius: 50%; */
	background-color:#000;
}

　　

4.animation-delay

在w3c咱们能够了解到animation-delay 属性定义动画什么时候开始。animation-delay 值以秒或毫秒计。

而且：它提示了咱们能够用负值定义这个属性，相似当咱们使用-2s定义这个属性的时候，好像动画开始的时候已经播放了两秒。

 

5.box-shadow

咱们都会使用box-shadow来为咱们的盒子加上阴影相似这样：box-shadow:3px 3px 4px rgba(0,0,0,.3);

可是当咱们的需求是只有一个方向有阴影的时候，可能咱们再加上一层结构使用溢出隐藏来实现。其实box-shadow有一个第四个个长度的参数，称为扩张半径,而且咱们可使用负值来对咱们的模糊半径进行反向抵消，咱们看这两个效果。

.div1{
	width: 200px; 
	height: 150px;
　　　　 border: 1px solid #ddd;
        box-shadow: 0 5px 4px #000;

}

　　

.div1{
	width: 200px; 
	height: 150px;
	border: 1px solid #ddd;
	box-shadow: 0 5px 4px -4px #000;
}

　　

这样使用第四个长度参数，咱们就轻松实现了单侧阴影。并且咱们还能够想到对边两侧阴影的实现

.div1{
	width: 200px; 
	height: 150px;
	border: 1px solid #ddd;
	box-shadow: 0 5px 4px -4px #000,0 -5px 4px -4px #000;
}

　　

 

 

 6.css三角形

 三角形是在页面中经常使用的一项。有时候咱们会切图来作，可是其实相似模拟下拉的那种下拉咱们是可使用简单的css来实现的，而且数学好的话，各类角度都不在话下。

        i{ width: 0; height: 0; float: left; margin:20px; }
        .up {
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 40px solid #000;
        }
        .down {
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 40px solid #000;
        }
        .left {
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-right: 40px solid #000;
        }
        .right {
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 40px solid #000;
        }
        .top-left {
            border-top: 40px solid #000;
            border-right: 40px solid transparent;
        }
        .top-right {
            border-top: 40px solid #000;
            border-right: 40px solid transparent;
        }
        .bottom-left {
            border-bottom: 40px solid #000;
            border-right: 40px solid transparent;
        }
        .bottom-right {
            border-bottom: 40px solid #000;
            border-right: 40px solid transparent;
        }        

角度来的话从下面的截图中就能够了解了。三角形的角度。。。我这里就很少说了。。。

 

7.cursor

这里要说的是cursor的值可不只仅是pointer。咱们能够根据不一样的场景使用不一样的光标，你们能够尝试下，下方来自w3c：

值	描述
url	需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（一般是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示连接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（一般是一只表或沙漏）。
help	此光标指示可用的帮助（一般是一个问号或一个气球）。

 

 8.box-shadow遮罩层

如何简单不增长元素和太多代码的状况下实现一个遮罩层（此方案遮罩层并不能添加事件）。

　　　　.div1{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color:#fff;
            box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.8);
        }

 

9.steps()

steps()是一个timing function，容许咱们将动画或者过渡分割成段，而不是从一种状态持续到另外一种状态的过渡。

steps 有两个参数

第一个确定是分几步执行完

第二个有两个值

1.start 第一帧是第一步动画结束

2.end 第一帧是第一步动画开始

他在咱们作动画的时候用处是十分大的，若是有兴趣的同窗能够移步【译】css动画里的steps()用法详解

我这里本身也根据网上的内容作了个小demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{ font-family:'宋体'; }
    @keyframes typing{
        from { width: 0; }
    }
    @keyframes caret{
        50%{ border-color: transparent; }
    }
    body{ text-align: center; }
    h1{ width: 12ch; overflow: hidden; white-space: nowrap; border-right: 0.5em solid; animation: typing 3s steps(12),caret 1s steps(1) infinite; }
    </style>
</head>
<body>
    <h1>hello world!</h1>
</body>
</html>

 未完待续~~~