css实现锯齿形 圆形边框

4 篇文章 0 订阅
2 篇文章 0 订阅

在网上找了一个实现锯齿形边框的:
css 主要代码如下

background-image:-webkit-gradient(
linear,//表示渐变的为直线 另外一个值是radial
50% 0,//直线型渐变的起点位置 后边有一个属性background-size规定背景的大小,30 X 15px  50% 0 都是乘以父元素的宽高。 
0 100%,//结束点的位置 和上类似
from(transparent),//起点的颜色
color-stop(.5,transparent), //中间某一个点必须达到这个颜色,表示变化过程  .5b表示这个渐变范围长度的总长的50%
color-stop(.5,#d86707),//同上
to(#d86707)),//结束段的颜色
//一个背景块的分为两个15X 15  组成。

-webkit-gradient(linear,50% 0,100% 100%,from(transparent), 
color-stop(.5,transparent),
color-stop(.5,#d86707),
to(#d86707));
background-size:30px 15px;
background-repeat:repeat-x;
background-position:0 100%; 

你可以给你的body 应用以上样式,那么效果类似下图:
这里写图片描述

background-image:-webkit-gradient(
radial,
50% 0,15,50% 0 ,17,from(#d86707),color-stop(50%, #d86707),color-stop(50%, #FFF),
to(#FFF));
//注意 圆的半径17表示17px 

以上代码为弧形的 边框 类似下图
这里写图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值