怎么用css做两头变尖的直线
程序员文章站
2022-03-22 19:13:44
...
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>
说明:
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做两头变尖的直线的详细内容,更多请关注其它相关文章!
上一篇: css3哪个是设置动画播放次数
下一篇: 允许javascript运行是什么意思
推荐阅读
-
关于用图片做无序列表的项目符号,我做出来怎么是这个样子?_html/css_WEB-ITnose
-
文字一部分黑色一部分白色的效果用css做怎么实现?_html/css_WEB-ITnose
-
关于用图片做无序列表的项目符号,我做出来怎么是这个样子?_html/css_WEB-ITnose
-
怎么用DIV做那种标签切换的页面啊_html/css_WEB-ITnose
-
用div做的下拉框怎么实现按字母跳转到指定的div?_html/css_WEB-ITnose
-
怎么用DIV做那种标签切换的页面啊_html/css_WEB-ITnose
-
用background:url图片做背景重复的,图片之间会有间隔,怎么解决?_html/css_WEB-ITnose
-
用div做的下拉框怎么实现按字母跳转到指定的div?_html/css_WEB-ITnose
-
用background:url图片做背景重复的,图片之间会有间隔,怎么解决?_html/css_WEB-ITnose
-
纹理素材怎么用?来看这20个用纹理做背景的优秀网站(上)_html/css_WEB-ITnose