边肖将与你分享css如何书写渐变边界。希望大家看完这篇文章后有所收获。我们一起讨论一下吧!
在css中,可以使用“border-image”属性和“linear-gradient()”函数编写渐变边框,写成“element object { border-image 3360 linear-gradient(渐变方向,颜色1,颜色2,颜色3)”;}"。
本教程操作环境:windows7系统,CSS3HTML5第5版,戴尔G3电脑。
在css中,可以使用border-image属性和linear-gradient()函数来编写渐变边框。
边框图像属性用于设置元素的边框样式,线性渐变()函数用于创建表示两种或多种颜色的线性渐变的图片。
要创建线性渐变,需要指定两种颜色,还可以实现不同方向(指定为角度)的渐变效果。如果不指定方向,默认情况下渐变将从上到下。
让我们看看如何使用border-image属性和linear-gradient()函数编写渐变边框,示例如下:
!DOCTYPEhtml
htmllang='en '
头
metachartset=' UTF-8 '
元名称=“视口”内容=“宽度=设备宽度,初始比例=1.0”
meta http-equiv=' X-UA-Compatible ' content=' ie=edge '
标题文档/标题
/head
身体
styletype='text/css '
div{
宽度width:250px
高度:250 px;
border:10pxsolid
边框图像:线性渐变(红色、黄色、蓝色)3030;
}
/style
分区/部门
/body
/html html输出结果:
看完这篇文章,相信大家对“如何用css写渐变边框”有了一定的了解。想了解更多,请关注行业资讯频道,感谢阅读!
内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/118536.html