css+svg实现锯齿状边框border效果代码

代码语言:html

所属分类:布局界面

代码描述:css+svg实现锯齿状边框border效果代码

代码标签: css svg 锯齿状 边框 border

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
<style>
:root {
    /* vars */
    --color: #222;
    --background: white;
    --svg: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 453.43 244.86'%3E%3Cpath d='M452.45,103.13c2.89-2.61-1.26-6.65-4.15-4.27-6.92,5.68-13.84,11.35-20.76,17.03,.14-.27,.23-.56,.26-.84,.87-.76,1.73-1.53,2.6-2.29,1.65-1.46,.65-3.93-.98-4.76,15.78-12.38,4.15-5.22,19.4-18.26,2.47-2.11-.88-6.5-3.49-4.52-8.83,6.71-2.75,1.78-11.58,8.49,.57-.47,1.15-.94,1.72-1.41,2.35-1.92-.24-5.53-2.8-4.82-.47-.35-1.02-.58-1.62-.61,.99-2.79-2.51-5.9-4.72-3.27-.04,.05-.08,.09-.12,.14-.79-1.21-2.54-1.97-4.09-1.18-.43-.41-.96-.7-1.52-.8,.09-.09,.17-.17,.26-.26,.77-.77,1-1.61,.87-2.36,1.85-1.87,3.69-3.74,5.53-5.61,1.61-1.63,.65-4.19-1.03-4.99,.34-.37,.69-.75,1.03-1.12,2.11-2.29-.78-6.58-3.49-4.52-.3,.23-.61,.46-.91,.7,3.16-2.58,6.32-5.15,9.48-7.72,1.73-1.41,.69-3.89-.98-4.71,3.04-2.99,6.95-6.78,13.03-12.56,2.79-2.66-1.36-6.88-4.16-4.27-4.87,4.53-6.88,6.43-7.98,7.51-.4-.82-1.19-1.47-2.1-1.67,.85-.88,1.71-1.76,2.56-2.64,1.35-1.39,.73-3.54-.56-4.53,.47-.41,.93-.82,1.39-1.22,1.71-1.5,.67-3.96-1.04-4.72,.49-.36,.97-.71,1.46-1.07,.86-.63,1.23-1.49,1.25-2.35,5.58-4.15,2.34-2.68,7.92-6.83,2.93-2.18,.12-7.16-2.91-4.97-8.8,6.38-14.03,10.47-20.24,15.19-.66-.55-1.53-.83-2.42-.66l12.84-9.47c2.92-2.15,.27-7.03-2.91-4.97-.8,.52-1.59,1.04-2.39,1.56-.73-.28-1.54-.25-2.3,.34-2.01,1.57-4.02,3.14-6.02,4.71,1.32-2.54-2.24-5.5-4.83-3.39-4.6,3.75-9.2,7.49-13.8,11.24,.09-.38,.11-.77,.04-1.16,1.21-1.24,2.43-2.48,3.64-3.73,2.76-2.83-1.25-6.59-4.15-4.27l-8.96,7.17c1.56-2.81-1.93-5.94-4.6-3.63-2.25,1.95-4.5,3.9-6.75,5.84-.32-.81-.97-1.45-1.76-1.72l2.83-3.12c2.19-2.41-.75-6.83-3.56-4.75-7.17,5.31-14.34,10.62-21.5,15.93-.4-.47-.91-.82-1.48-.99,4.71-3.32,9.41-6.64,14.12-9.95,3.17-2.24,.47-6.78-2.97-5.22-2.57,1.17-5.14,2.34-7.71,3.51-.52-1.33-2.08-2.3-3.61-1.85,.98-1.33,.72-2.82-.12-3.79,.12-.2,.24-.4,.36-.6,1.72-2.92-2.33-6.2-4.61-3.66-5.41,6.01-10.82,12.03-16.22,18.04-.56-1.95-2.89-3.25-4.77-1.35-3.25,3.29-6.51,6.57-9.76,9.86,.52-.93,1.05-1.86,1.57-2.78,.91-1.62,.05-3.41-1.27-4.2,.54-2.27-1.89-4.98-4.15-3.29-.25,.19-.5,.38-.76,.57-.63-1.81-2.98-3.03-4.7-1.23-1.67,1.75-3.35,3.5-5.02,5.26-.25-.28-.53-.52-.85-.69,6.2-6.51,12.35-13.07,18.43-19.7,2.23-2.43-.68-6.69-3.56-4.74-4.35,2.94-8.67,5.93-12.96,8.94-.74-1.23-2.31-1.94-3.76-1.08,6.27-6.65-1.91,2.07,4.36-4.58,2.55-2.7-1.42-6.69-4.07-4.07-5.97,5.9-10.84,10.62-15.22,14.82-.56-1.93-3.07-3.33-4.93-1.48l-7.85,7.83c-.32-1.07-1.21-1.92-2.28-2.16,3.41-2.63,6.81-5.26,10.22-7.89,2.97-2.3,.14-7.51-2.97-5.22-1.14,.85-2.29,1.69-3.43,2.54-.36-1.52-1.73-2.78-3.46-2.09-.75,.3-1.49,.6-2.24,.9-1.02,.41-1.59,1.2-1.81,2.06-8.89,7.15-17.78,14.31-26.67,21.46-.32-.08-.66-.1-1-.03,5.03-4.32,10.06-8.65,15.09-12.97,1.41-1.21,.99-3.16-.12-4.31,1.52-2.58-2.07-5.78-4.56-3.43-2.44,2.31-4.88,4.61-7.32,6.92-.57,.07-1.15,.33-1.68,.87-2.1,2.12-4.19,4.24-6.29,6.37-.03-.06-.07-.1-.1-.16,1.94-1.94,3.89-3.88,5.83-5.82,2.64-2.63-1.37-6.61-4.07-4.07-3.71,3.48-7.41,6.96-11.12,10.44-.33-.21-.69-.35-1.1-.39-.74-.32-1.62-.32-2.5,.2-1.33,.8-2.65,1.61-3.98,2.42-.18-.23-.41-.43-.65-.61,6.44-7.41,12.69-15,18.69-22.79,0,0,.02-.02,.02-.02,0,0,0,0,0,0,.15-.2,.3-.38,.45-.58,2.08-2.71-2.22-5.57-4.52-3.49-8.57,7.75-13.97,12.75-19.01,17.44-5.34,4.36-7.58,5.55-10.69,7.51,2.32-2.82,4.96-5.9,10.93-11.89,2.27-2.27-.72-6.37-3.49-4.52-3.55,3.28-6.41,6.01-8.77,8.33-.14-.42-.37-.8-.67-1.13,1-.93,2-1.85,3-2.78,2.51-2.36-.71-6.42-3.56-4.75-7.6,4.47-15.14,9.03-22.66,13.64,.47-.55,.9-1.03,1.24-1.43,1.22-1.43,8.56-7.77,10.22-9.69,2.49-2.74-1.35-6.62-4.07-4.07-1.09,1.02-2.17,2.03-3.26,3.05-.92-.94-2.35-1.38-3.49-.52-3.39,2.56-6.74,5.16-10.09,7.77,0-.02,0-.04,0-.06,1.54-1.28,3.08-2.55,4.63-3.83,2.66-2.2-.72-5.9-3.49-4.52-5.34,2.66-10.61,5.43-15.83,8.3,.8-.68,1.6-1.36,2.4-2.04,2.56-2.18-.85-6.74-3.56-4.75l-13.61,10.02c-.62,.03-1.25,.27-1.81,.83-.66,.65-1.33,1.31-1.99,1.96l-4.81,3.54c0-.82-.27-1.63-.74-2.25,.49-.64,.58-1.42,.4-2.16l5.23-3.7c1.36-.96,1.58-2.48,1.13-3.7,2.17-2.14-1.05-6.18-3.65-4.35-1.52,1.06-3.04,2.13-4.56,3.19-.27-1.87-2.29-3.65-4.08-2.66-.69-1.39-2.44-2.34-4.07-1.39-.96,.56-1.91,1.15-2.86,1.72,.75-.68,1.5-1.35,2.25-2.03,2.91-2.62-1.24-6.59-4.15-4.27-1.51,1.2-3.01,2.39-4.51,3.59-.8-1.39-2.49-2.27-3.99-1.17-5.78,4.24-11.55,8.48-17.33,12.72l2.83-2.56c.37-.34,.6-.73,.74-1.13,2.68-2.45,5.36-4.9,8.04-7.35,2.85-2.6-1.31-6.8-4.15-4.27-1.98,1.75-3.96,3.51-5.93,5.26-.98-1.27-2.96-1.95-4.57-.66-4.15,3.31-8.31,6.63-12.46,9.94-.12-.24-.27-.45-.44-.66,2.34-3.06,4.68-6.12,7.02-9.18,1.87-2.44-.68-7.01-3.56-4.75-2.63,2.07-5.27,4.15-7.9,6.22,.95-1.94-.8-4.4-2.86-4.31,1.94-1.74,3.89-3.48,5.84-5.22,2.51-2.25-.8-6.67-3.56-4.75l-22.18,15.44c3.36-3.79,6.71-7.58,10.07-11.37,2.14-2.42-.74-6.85-3.56-4.75-4.86,3.62-9.72,7.24-14.59,10.85-1.0.........完整代码请登录后点击上方下载按钮下载查看

网友评论0