HTML中的弯曲按钮大纲CSS

时间:2016-12-27 06:20:36

标签: html css html5

我想围绕按钮制作轮廓。但作为默认而不是弯曲,它将呈现为矩形形状。请引导我使用CSS制作弯曲的圆形轮廓。

由于

List of Values :  [15  1  4  6  3 10  4]

Sum Desired :  8

Values that add up to sum :  [1, 4, 3]

3 个答案:

答案 0 :(得分:1)

您可以尝试提供box-shadow代替outline。像:

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

请看下面的代码段:



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

<html>
<body>
  <input type="button" value="Button" />
</body>
</html>
&#13;
&#13;
&#13;

希望这有帮助!

答案 1 :(得分:1)

本地这是不可能的。 Firefox有一个属性-moz-outline-radius但并非所有浏览器都支持。

您可以查看这篇文章以获取有关多个边框的帮助,它有各种技术。

https://css-tricks.com/snippets/css/multiple-borders/

答案 2 :(得分:-1)

border-radius可以解决问题。

RE:这是因为outline尝试删除该行。