请问这种样式如何实现CSS


.camera {
    font-size: 100px;
    position: relative;
    width: 0.6em;
    height: 0.4em;
    background-color: #39a9d6;
    border-radius: 0.2em 0.2em 0 0 / 0.3em 0.3em 0 0;
}

.camera::before {
    content: "";
    position: absolute;
    top: 0.3em;
    left: -0.5em;
    width: 1.6em;
    height: 1em;
    background-color: #39a9d6;
    border-radius: 0.2em;
}

.camera::after {
    content: "";
    position: absolute;
    top: 0.4em;
    left: -0.1em;
    width: 0.6em;
    height: 0.6em;
    border: 0.1em solid #fff;
    border-radius: 100%;
}

Fractal

5.5k22434

发布于
2020-10-16

更新于
2020-10-16

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
 body {margin:0;padding:0;min-height:100vh;background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602820508239&di=0236f13bc3229cad6b489a4d30a99fec&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171206%2F9e4f71cb12e340c692617568e04aca31.jpeg") center center/cover no-repeat;}
    .nav-bottom {position:fixed;left:0;right:0;bottom:0;}
    .nav-curve {position:absolute;top:0;left:0;right:0;height:22px;pointer-events:none;overflow:hidden;}
    .nav-curve .nav-curve-left {position:absolute;width:50%;height:60px;bottom:0;left:0;overflow:hidden;}
    .nav-curve .nav-curve-right {position:absolute;width:50%;height:60px;bottom:0;right:0;overflow:hidden;}
    .nav-curve .mask {position:absolute;bottom:0;width:100%;height:60px;background-color:transparent;box-shadow:0 0 0 500px #FFF/*rgba(255,192,192,0.5)*/;}
    .nav-curve-left .mask {left:-6px;border-bottom-right-radius:30px;transform:skewX(120deg);}
    .nav-curve-right .mask {right:-6px;border-bottom-left-radius:30px;transform:skewX(60deg);}
    .nav-curve-top {position:absolute;margin-left:-40px;top:-6px;left:50%;width:80px;height:80px;border-radius:50%;background-color:#FFF;/*rgba(192,192,255,0.5)*/;}
    .nav-bottom .nav-list {margin-top:22px;height:50px;background-color:#FFF/*rgba(255,192,255,0.5)*/;}
    </style>
</head>
<body>
<div class="nav-bottom">
 <div class="nav-curve-top"></div>
 <div class="nav-curve">
  <div class="nav-curve-left">
   <div class="mask"></div>
  </div>
 </div>
 <div class="nav-curve">
  <div class="nav-curve-right">
   <div class="mask"></div>
  </div>
 </div>
 <div class="nav-list"></div>
</div>
</body>
</html>

lcorz

1k1312

发布于
2020-10-15

两个白色圆在后面叠一下

帅的一笔

27049

发布于
2020-10-15

<!docType html>
<html>
<head>
 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
 <div class="container">
 <div class="top">
 <div class="item">左边两标签</div>
 </div> <div class="middle">
 <div class="item">相机图标</div>
 </div> <div class="bottom">右边两标签</div>
 </div></body>
</html>
<style>
.container {
 display: flex;
 align-items: center;
}
.top {
 width: 30%
}
.middle {
  width: 18%;
 border: 1px solid red;
 border-top-right-radius: 28px;
 border-top-left-radius: 28px;
}
.bottom {
 width: 30%
}
.top, .middle, .bottom {
 height: 40px;
 text-align: center;
}
</style>

大概就这个意思

请问这种样式如何实现CSS

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

如何在CSS中实现滚动条不溢出圆角框？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？

表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？

tailwind css group hover的触发问题?