css 使用径向渐变实现卡券效果

使用伪元素与LESS实现复杂票务样式

最新推荐文章于 2023-11-13 12:47:21 发布

原创

最新推荐文章于 2023-11-13 12:47:21 发布 · 599 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html5

本文介绍如何运用LESS预处理器的伪元素和混合选择器来创建复杂的票务UI样式，包括水平和垂直边框效果，以及阴影和渐变背景。通过详细代码示例，展示了如何调整参数以适应不同需求。

使用伪元素实现（Less 版本）

.ordinary-mixins-ticket-horizontal(@width,@height,@r,@top, @color) {
  position: relative;
  box-sizing: border-box;
  padding: 0 @r;
  width: @width;
  height: @height;
  background-clip: content-box;
  background-color: @color;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: @r + 1px;
    height: 100%;
    background: radial-gradient(@r circle at left @top, transparent @r, @color @r + 1px);
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    display: block;
    //这里的 @r + 1px 是为了避免某些百分百比缩放页面时，出现空隙
    width: @r + 1px;
    height: 100%;
    //这里的 @r + 1px 是为了防止出现锯齿
    background: radial-gradient(@r circle at right @top, transparent @r, @color @r + 1px);
  }
}

.paren