高清欧美性猛交xxxx黑人猛交,精品久久久久久久久久久aⅴ,中文字幕第二页精品一区

技術頻道 - html技術

一款純CSS實現的精致好看的圓角漸變邊框

作者:admin 時間:2023-7-7 14:5:13 瀏覽:

本文介紹一款純CSS實現的精致好看的圓角漸變邊框。

效果圖

一款純CSS實現的精致好看的圓角漸變邊框

完整HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<style>
:root{
  --border-width: 12px;
  --border-radius: 2rem;
}
body{
  font-family: Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
section {
    position: relative;
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius);
    background: white;
    background-clip: padding-box;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}

section::after {
    position: absolute;
    top: calc(var(--border-width) * -1); bottom: calc(var(--border-width) * -1);
    left: calc(var(--border-width) * -1); right: calc(var(--border-width) * -1);
    background: linear-gradient(to bottom right, #ee2400, #699da2, #fbd9d3);
    content: '';
    z-index: -1;
    border-radius: var(--border-radius);
}
</style>
</head>
<body >
<section>
  <p>
    純CSS實現的圓角漸變邊框<br/>
  </p>
</section>
</body>
</html>