css 我已经厌倦了使边界半径与75%的高度

du7egjpx 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(101)

我已经厌倦了试图使边界像在设计与CSS，任何人都有任何想法如何做到这一点。
我试着：

边缘图像
after和before（伪元素）
我耍了很多花招但都没成功。

border-radius: 40px;
  border-left: 2px solid red;
  border-right: 2px solid red;
  border-left-style: inset;
  border-right-style: outset;

here the image border design
这可能吗！？
谢谢你的有趣。

css

来源：https://stackoverflow.com/questions/76106006/ive-got-tired-make-border-radius-with-75-of-height

2条答案

按热度按时间

46scxncf1#

我不知道我是否理解正确，看看这种方法是否有助于解决您的问题

.search-box {
            border: 3px solid #ccc;
            border-left-color: red;
            border-right-color: red;
            padding: 5px;
            width: 400px;
            height: 50px;
            box-sizing: border-box;
            font-size: 18px;
            outline: none;
            border-radius: 40px;
            background-image: url('https://img1.gratispng.com/20180516/w/kisspng-electric-light-copyright-free-incandescent-light-b-5afbadc7aee409.3907345415264434637164.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: auto 80%;
            padding-left: 20px;
        }

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo</title>
</head>
<body>
    <form>
        <input type="text" class="search-box" placeholder="Search">
    </form>
</body>
</html>

赞(0）回复(0）举报 2023-05-02

ia2d9nvy2#

使用伪元素的解决方案：

:root {
  --shift: 0.8em;
  --border: 0.3em;
  --padding: 1em 1.5em;
}

div {
  display: flex;
  align-items: center;
  position: relative;
  /* Prevent red dots from overflowing */
  overflow: hidden;
  /* Create pill-like shape */
  border-radius: 100em;
  /* Border thickness */
  padding: var(--border);
  background: #ddd;
}

input {
  flex: 1;
  appearance: none;
  border: 0;
  border-radius: 100em;
  padding: var(--padding);
  /* This overlays the red dots */
  z-index: 100;
}

/* Red dots */
div::before, div::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  height: 200%;
  aspect-ratio: 1 / 1;
  background: #f00;
}

div::before {
  right: calc(100% - var(--shift));
}

div::after {
  left: calc(100% - var(--shift));
}

/* Demo only */

body {
  display: flex;
  justify-content: center;
  padding: 3em 0;
}

input:active, input:focus {
  outline: none;
}

<div>
  <input type="text" placeholder="Search">
</div>

赞(0）回复(0）举报 2023-05-02

我来回答

css 我已经厌倦了使边界半径与75%的高度

2条答案

相关问题

热门标签

最新问答