css下波浪线的单词,CSS制作波浪线(示例代码)

建议先去了解清楚了径向渐变,线性渐变的用法先

这个作者的css制作波浪线讲解很不错额:https://www.jianshu.com/p/8570433e3669不理解的可以看看这个链接的额

可以去菜鸟教程上查找径向渐变的案例进行更改容易理解其属性值都是怎么用的额(*^__^*) 嘻嘻……希望能帮到你

注意: Internet Explorer 9 及之前的版本不支持渐变

代码结果图:

f2860fd5922e47b9b7561e9d0f92a89b.jpg

代码如下:

html:

css:

.wave{

height: .1rem;

width: 100%;

background-size: .2rem .2rem;

background-image: -webkit-radial-gradient(transparent 35%, #ddd 45%, transparent 55%); /* Safari 5.1 - 6.0 */

background-image: -o-radial-gradient(transparent 35%, #ddd 45%, transparent 55%); /* Opera 11.6 - 12.0 */

background-image: -moz-radial-gradient(transparent 35%, #ddd 45%, transparent 55%); /* Firefox 3.6 - 15 */

background-image: radial-gradient(transparent 35%, #ddd 45%, transparent 55%); /* 标准的语法(必须放在最后) */

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值