• 技术文章 >web前端 >前端问答

    怎么用css做两头变尖的直线

    青灯夜游青灯夜游2021-09-10 17:32:52原创109

    css中可给元素添加“background:linear-gradient(rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%);”样式绘制两头变尖直线。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在css中,可以利用线性渐变linear-gradient()函数来做两头变尖的直线。

    示例:

    <!DOCTYPE html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style type="text/css">
    		body {
    			background-color: red;
    		}
    
    		.Line {
    			width: 1px;
    			height: 500px;
    			background: linear-gradient(244deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    			margin: 20px;
    		}
    	</style>
    </head>
    <body>
    	<div class="Line"></div>
    </body>
    </html>

    1.png

    说明:

    linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

    创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。

    语法:background: linear-gradient(direction, color-stop1, color-stop2, ...);

    描述
    direction用角度值指定渐变的方向(或角度)。
    color-stop1, color-stop2,...用于指定渐变的起止颜色。

    示例:

    //线性渐变指定一个角度:
    #grad { background-image: linear-gradient(180deg, red, yellow);}
    
    //线性渐变指定多个终止色:
    #grad {background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}
    
    //透明度:
    #grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}

    推荐教程:《CSS视频教程

    以上就是怎么用css做两头变尖的直线的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 两头变尖的直线
    上一篇:css中有几种样式 下一篇:先引入js还是css文件
    线上培训班

    相关文章推荐

    • 让网站更酷炫的CSS filter使用小技巧,值得收藏!• css怎么设置正在访问的链接背景• css中如何将行元素转为块元素,块元素转为行元素• css中有几种样式

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网