css 【圆弧】【通过伪类扩大可点击区域】【线性渐变+透明度】【svg画圆+叠加】【滚动条】

最新推荐文章于 2023-03-14 16:57:28 发布

改个名字888777

最新推荐文章于 2023-03-14 16:57:28 发布

阅读量447

点赞数

分类专栏： h5 css

本文链接：https://blog.csdn.net/Lakeson/article/details/103544699

版权

h5 css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

.patient-protocol {
  text-shadow: inherit;
  width: @text-type-width;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 限定区域字数长度

通过伪类扩大可点击区域

button {
 position: relative;
 /* [其余样式] */
}
button::before {
 content: '';
 position: absolute;
 top: -10px; 
 right: -10px;
 bottom: -10px; 
 left: -10px;
}

固定高度的CSS（chrome浏览器）

.layout-protocol-item {
  height: 890px;
  overflow: auto;
}

.layout-protocol-item::-webkit-scrollbar {
  width: 0;
}

svg的一个小实现

==》先来看一个svg画圆的公式

主要用到SVG对应的CSS属性为: stroke, stroke-width, stroke-dasharray， bordrer-radius

==》需求：用svg实现这样的图

因为svg可以叠加图片，所以上面这个分步骤画法如下：

无需给svg容器设置大小使其自适应的方法：

<svg viewBox="0 0 32 32">
<circle r='16' cx='16' cy='16' />
</svg>

svg {
width: 100px;
height: 100px;
transform: rotate(-90deg);
border-radius:50%;
background:red
}

circle {
fill: red;
stroke: #484848;
stroke-width: 32;
stroke-dasharry: 38 100;
}

svg覆盖的方法：https://www.cnblogs.com/xiyangbaixue/p/4150600.html

圆弧

</head>
  <style>
    .wrapper {
      color: red;
      width: 130px;
      height: 100px;
      border-left: 1px solid #484848;
      padding: 10px;
      position: relative;
      margin: 70px;
    }
    .circle-1 {
      position: absolute;
      border-radius: 0% 50% 0% 0%;
      border-right: 1px solid blue;
      border-top: 1px solid blue;
      width: 150px;
      height: 250px;
      top: 120px;
      right: 0px;
    }
    .circle-2 {
      position: absolute;
      border-radius: 0% 0% 50% 0%;
      border-bottom: 1px solid rgb(255, 0, 179);
      border-right: 1px solid rgb(255, 0, 179);
      width: 150px;
      height: 250px;
      top: -250px;
      right: 0px;
    }
    .page {
      margin: 20px;
      width: 240px;
      height: 240px;
      border: 1px solid red;
    }
  </style>
  <body>
    233
    <div class="wrapper">
      456
      <div class="circle-1"></div>
      <div class="circle-2"></div>
    </div>
    <div class="page">hhhh</div>
  </body>
</html>

线性渐变

.test {
background: linear-gradient(
  to right,
  rgba(255, 255, 255, 0.6), // 0.6是设置透明度
  rgba(109, 109, 114, 0.46) 70%,
  rgba(47, 48, 55, 0.4)
);
}

https://www.cnblogs.com/xiaohuochai/p/5294409.html 【滚动条】

改个名字888777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 【圆弧】【通过伪类扩大可点击区域】【线性渐变+透明度】【svg画圆+叠加】【滚动条】

通过伪类扩大可点击区域button { position: relative; /* [其余样式] */}button::before { content: ''; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px;} svg的一个小实现 ==》先来看...
复制链接

扫一扫