HTML中的曲线按钮轮廓CSS_Css_Html

HTML中的曲线按钮轮廓CSS

css html

HTML中的曲线按钮轮廓CSS,css,html,Css,Html,我想在按钮周围画一个轮廓。但默认情况下，它不是弯曲的，而是一个矩形。请指导我使用CSS制作曲线圆形轮廓谢谢 <!DOCTYPE html> <html> <head> <style> input { border: 2px solid #a1a1a1; padding: 10px 40px; background: #dddddd; width: 300px

我想在按钮周围画一个轮廓。但默认情况下，它不是弯曲的，而是一个矩形。请指导我使用CSS制作曲线圆形轮廓

谢谢

   <!DOCTYPE html>
   <html>
   <head>
   <style> 
   input {
       border: 2px solid #a1a1a1;
       padding: 10px 40px; 
       background: #dddddd;
       width: 300px;
       border-radius: 25px;
       outline : 2px solid red;
   }
   </style>
   </head>
   <body>

          <input type="button" value="Button" />

   </body>
   </html>


输入{
边框：2px实心#A1A1；
填充：10px 40px；
背景：#dddddd；
宽度：300px；
边界半径：25px；
外形：2倍纯红；
}

边界半径

就可以了

RE：这是因为

大纲

请尝试删除该行。

您可以尝试给

框阴影

而不是

大纲

。比如：

input {
  border: 2px solid #a1a1a1;
  padding: 10px 40px; 
  background: #dddddd;
  width: 300px;
  border-radius: 25px;
  box-shadow: 0 0 3px red;
}

请看下面的代码片段：

输入{
边框：2px实心#A1A1；
填充：10px 40px；
背景：#dddddd；
宽度：300px；
边界半径：25px；
长方体阴影：0 5px红色；
}

这在本机上是不可能的。Firefox有一个属性

-moz outline radius

，但并非所有浏览器都支持

您可以查看本文以获得有关多边框的帮助，它有各种技术

OP在帖子中使用了

边界半径

！还是没用。OP询问如何设置

大纲的样式，您告诉他们将其删除。根据我的指导说明，可能会重复，我不应使用方框阴影。如果没有框影，我应该做轮廓。