border-radius长方形圆得不好看

你可以尝试调整 `border-radius` 的值来改善长方形圆角的外观。如果你认为现有的圆角效果不够理想，可以尝试使用更大或更小的值，或者尝试使用不同的单位（如像素、百分比等）来定义圆角的大小。另外，还可以尝试使用多个值来定义不同的圆角大小，以创建更复杂的形状。请记住，选择合适的 `border-radius` 值往往需要一些试验和调整，以满足你的需求。

相关问题

css写一个长方形盒子底部两个角为反圆角

可以使用 CSS 的 border-radius 属性来实现盒子的圆角效果，同时使用 :before 和 :after 伪元素来实现底部的反圆角效果，如下所示：

.box {
  width: 200px;
  height: 100px;
  background-color: #f2f2f2;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: relative;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  height: 20px;
  bottom: -20px;
  background-color: #f2f2f2;
}

.box:before {
  left: -10px;
  border-bottom-left-radius: 10px;
}

.box:after {
  right: -10px;
  border-bottom-right-radius: 10px;
}

这样就可以实现一个底部两个角为反圆角的长方形盒子。

* { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { background: #252525; } .container { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 300px; height: 100px; } .container .search { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 80px; height: 80px; background: crimson; border-radius: 50%; transition: all 1s; z-index: 4; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4); } .container .search:hover { cursor: pointer; } .container .search::before { content: ""; position: absolute; margin: auto; top: 22px; right: 0; bottom: 0; left: 22px; width: 12px; height: 2px; background: white; transform: rotate(45deg); transition: all 0.5s; } .container .search::after { content: ""; position: absolute; margin: auto; top: -5px; right: 0; bottom: 0; left: -5px; width: 25px; height: 25px; border-radius: 50%; border: 2px solid white; transition: all 0.5s; } .container input { font-family: "Inconsolata", monospace; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 50px; height: 50px; outline: none; border: none; background: crimson; color: white; text-shadow: 0 0 10px crimson; padding: 0 80px 0 20px; border-radius: 30px; box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2); transition: all 1s; opacity: 0; z-index: 5; font-weight: bolder; letter-spacing: 0.1em; } .container input:hover { cursor: pointer; } .container input:focus { width: 300px; opacity: 1; cursor: text; } .container input:focus ~ .search { right: -250px; background: #151515; z-index: 6; } .container input:focus ~ .search::before { top: 0; left: 0; width: 25px; } .container input:focus ~ .search::after { top: 0; left: 0; width: 25px; height: 2px; border: none; background: white; border-radius: 0%; transform: rotate(-45deg); } .container input::placeholder { color: white; opacity: 0.5; font-weight: bolder; }

这段代码是一个简单的搜索框样式，使用了CSS3的动画效果。其中包括一个圆形搜索按钮（红色），点击按钮后输入框会从小圆圈扩大为长方形，并且搜索按钮会移动到输入框的左侧，并且变为白色。同时，输入框的背景颜色也会变成一个深色，并且输入框的宽度会变宽，以便用户能够输入更多的内容。在输入框中输入搜索内容时，输入框的文本颜色变为白色，而搜索按钮的形状也会变化，以增强用户的反馈感。