CSS3线性渐变linear-gradient实现横线纸张效果

时间：5年前阅读：8862

渐变实际上是两种或多种颜色之间的平滑过渡。而线性渐变是多种颜色沿着一条直线(称为渐变线)过渡。渐变的实现由两部分组成：渐变线和色标。渐变线用来控制发生渐变的方向；色标包含一个颜色值和一个位置，用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变，通过确定多个色标可以制作多色渐变效果。

　　渐变线从渐变框中心向两个方向进行拓展，起点和终点是渐变线与经过渐变框的一个角的垂直线的相交点。

font 简写属性在一个声明中设置所有字体属性。

注释：此属性也有第六个值："line-height"，可设置行间距。

说明

这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。

可以按顺序设置如下属性：

font-style

font-variant

font-weight

font-size/line-height

font-family

使用重复渐变可以实现横线纸张效果　　

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#tt{
    height: 200px;
    width:500px;
    font: 14px/20px '宋体';
    text-indent: 2em;
    background-image: -webkit-repeating-linear-gradient(#f9f9f9,#f9f9f9 9%,#ccc 10%);
    background-image: repeating-linear-gradient(#f9f9f9,#f9f9f9 9%,#ccc 10%);
}
		</style>
	</head>
	<body>
		<div id="tt">async和await关键字编译器功能，编译器会用Task类创建代码。如果不使用这两个关键字，也是可以用c#4.0Task类的方法来实现同样的功能，虽然会麻烦点。下面我们看下async和await这两个关键字能做什么，如何采用简单的方式创建异步方法，如何并行调用多个异步方法等等。</div>
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

CSS3线性渐变linear-gradient实现横线纸张效果

网友评论