div+css布局实现镶嵌文本阴影效果代码

代码语言:html

所属分类:布局界面

代码描述:div+css布局实现镶嵌文本阴影效果代码

代码标签: div css 布局 镶嵌 文本 阴影

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

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

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

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;900&display=swap");
.brd-cap {
  float: left;
  font-size: 10rem;
  font-weight: 900;
  color: #e61e82;
  width: 0.75em;
  text-shadow: 0.01em 0.025em 0 #F9F6EF;
  position: relative;
}
.brd-cap:before {
  display: inline-grid;
  place-content: center;
  content: attr(shape);
  position: absolute;
  width: 1ch;
  height: 1em;
  top: -0.33em;
  left: 0.03em;
  color: transparent;
  text-shadow: none;
  -webkit-text-stroke: 1px rgba(255, 56, 156, 0.5);
  text-stroke: 1px rgba(255, 56, 156, 0.5);
  z-i.........完整代码请登录后点击上方下载按钮下载查看

网友评论0