小编New*_*bie的帖子

CSS - 按钮边框渐变

经过广泛搜索后，我陷入了如何在 CSS 中复制此按钮的问题，特别是边框，因为如果可能的话，我将在其他元素上使用它。

设计好的按钮

\r\n

button.rounded-button {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 1.125rem 2rem;\n    \n    position: absolute;\n    width: 13.5919rem;\n    height: 4.375rem;\n    \n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(0.7942rem);\n\n    border-radius: 5.8652rem;\n    border-image-slice: 1 1 0 0;\n    border: 1px solid;\n    border-image-source: linear-gradient(257.34deg, #FFFFFF 4.56%, rgba(255, 255, 255, 0) 29.19%);\n    \n    font-size: 1.25rem;\n    line-height: 2.125rem;\n    color: #fff;\n}\n\nbody {\n    background: #393939;\n}

Run Code Online (Sandbox Code Playgroud)\r\n

<!-- SVG Not included with the example -->\n<button type="button" class="rounded-button">\n  Watch …

Run Code Online (Sandbox Code Playgroud)

html css

Jus*_*ell

2021 09-30

4
推荐指数

1
解决办法

2883
查看次数

将相同的 Props 传递给多个 React 组件

我目前正在根据值渲染两个不同的组件shouldRenderPlanA- 然而，尽管渲染了不同的组件（取决于值） - 我传递了两个相同的道具。我怎样才能压缩它以减少重复的代码？

return (
  <>
    {options.map(option)}
    <StyledRow>
      {variousOptions.map((opt) => (
        shouldRenderPlanA ? (
          <StyledLabelOptionOne
            variousProps={variousProps}
            variousProps={variousProps}
            variousProps={variousProps}
          />
        ) : (
          <StyledLabelOptionTwo
            variousProps={variousProps}
            variousProps={variousProps}
            variousProps={variousProps}
          />
        )
      ))}
    </StyledRow>
  </>
);

Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-props

cts*_*cts

2021 09-29

3
推荐指数

1
解决办法

6235
查看次数