前端开发者广州中级前端开发工资|web前端开发月工资多少钱|2017前端开发的工资
兼容不好，只有webkit内核支持。
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>前端开发要用的工具：iPhoneX 效果</title>
<style type=”text/css”>
::-webkit-scrollbar {
width: 0;
height: 0;
}
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #000;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
ul {
list-style: none;
}
li {
padding: .5em;
box-shadow: inset 0 0 10px #eee;
}
.wrap {
position: relative;
margin: 0 auto;
width: 800px;
height: 500px;
overflow: auto;
background: #fff;
box-shadow: 0 0 15px #fff;
}
.po {
position: absolute;
left: 0;
top: 155px;
width: 30px;
height: 190px;
background: #000;
border-radius: 0 100% 100% 0/0 100% 100% 0;
}
.fl {
float: left;
width: 40px;
shape-outside: polygon(0 150px, 20px 152px, 30px 155px, 40px 170px, 40px 330px, 30px 345px, 20px 348px, 0 350px);
}
</style>
</head>
<body>
<div class=”wrap”>
<div class=”po”></div>
<div class=”fl”></div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
<script type=”text/javascript”>
var wrap = document.querySelector(‘.wrap’);
var ul = document.querySelector(‘.wrap ul’);
var fl = document.querySelector(‘.wrap .fl’);
var po = document.querySelector(‘.wrap .po’);
fl.style.height = ul.scrollHeight + ‘px’;
wrap.onscroll = function (e) {
var s = wrap.scrollTop;
fl.style.shapeOutside = ‘polygon(0 ‘ + (150 + s) + ‘px, 20px ‘ + (152 + s) + ‘px, 30px ‘ + (155 + s) + ‘px, 40px ‘ + (170 + s) + ‘px, 40px ‘ + (330 + s) + ‘px, 30px ‘ + (345 + s) + ‘px, 20px ‘ + (348 + s) + ‘px, 0 ‘ + (350 + s) + ‘px)’;
po.style.top = 155 + s + ‘px’;
}
</script>
</body>
</html>
原文请戳http://www.zhangxinxu.com/wordpress/2017/09/css-shapes-outside-iphone-x-head/
新加坡前端开发工资多少|前端开发代码生成器|东莞前端开发工程师
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册