css布局实现文本行边框半径效果代码-html代码-BFW代码库

css布局实现文本行边框半径效果代码

代码语言：html

代码描述：css布局实现文本行边框半径效果代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
  
<style>
:root {
  --wrap-bg-color: #fff;
  --wrap-fg-color: #000;
  --wrap-accent-color: #e09d4d;
  --wrap-radius: 15px;
  --wrap-padding: 24px;
  --wrap-font-size: 45px;
  --wrap-line-height: 1.4;
}

body {
  background-color: #222;
  background-image: url(//repo.bfw.wiki/bfwrepo/image/62a7ea1c0ef8f.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 100vh;
}

.wrap {
  align-items: center;
  border-left: var(--wrap-padding) solid var(--wrap-bg-color);
  display: flex;
  height: 100%;
}

p {
  align-items: flex-start;
  color: #000;
  display: flex;
  flex-direction: column;
  font-family: Playfair Display, serif;
  font-size: var(--wrap-font-size);
  line-height: var(--wrap-line-height);
}

em {
  color: var(--wrap-accent-color);
}

span {
  background-color: var(--wrap-bg-color);
  border-radius: 0 0 var(--wrap-radius) 0;
  padding-right: var(--wrap-padding);
  position: relative;
  whi.........完整代码请登录后点击上方下载按钮下载查看