CSS使用阴影完成滚动提示

最新推荐文章于 2022-07-04 17:25:37 发布

易山易酒易诗

最新推荐文章于 2022-07-04 17:25:37 发布

阅读量194

点赞数 1

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_44675204/article/details/124548812

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

请添加图片描述

<template>
  <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>9</li>
    <li>10</li>
  </ul>
</template>

<script>
export default {
  mounted() {},
  methods: {},
};
</script>

<style>
body {
  background: none;
  font: bold 100% Helvetica, sans-serif;
}

ul {
  width: 100px;
  height: 100px;
  padding: 0;
  margin: 10px;
  text-align: center;
  border: 1px solid silver;
  background: linear-gradient(white 0 30%, rgb(0, 0, 0, 0)), 
    radial-gradient(at top, rgba(0,0,0,.2), transparent 70%),
    linear-gradient(to top, white 0 30%, rgb(0, 0, 0, 0)), 
    radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%);
  background-repeat: no-repeat;
  background-size: 100% 50px, 100% 15px, 100% 50px, 100% 15px;
  background-position: 0 0, 0 0, 0 100%, 0 100%;
  background-attachment: local, scroll, local, scroll;
  overflow: scroll;
}

li {
  padding: 0;
  list-style: none;
}

</style>