HTML中的弯曲按钮轮廓CSS
我想围绕按钮进行轮廓。但作为默认而不是弯曲,它将以矩形形状出现。请引导我使用CSS制作弯曲的圆形轮廓。HTML中的弯曲按钮轮廓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>
border-radius
会做的伎俩。
RE:这是因为outline
试图删除该行。
OP在帖子中使用'border-radius'! –
仍然没有帮助。 OP正在询问如何设置'outline'的风格,并告诉他们删除它。 –
您可以尝试给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>
希望这有助于!
根据我的指导说明,我不应该使用箱形阴影。没有箱子阴影我应该做轮廓。 – Velmurugan
本地这是不可能的。 Firefox有一个属性-moz-outline-radius
,但并不受所有浏览器支持。
你可以看看这篇文章的多边界帮助,它有各种技术。
尝试加入引导JS和CSS文件头部分再使用.IMG全面的阶级,使曲线
<div class="container">
<img src="your_img.jpg" class="img-rounded" alt="img_name" >
</div>
引导文件可以下载从anywhere.you需要以下三个文件要添加在html的头部分
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
可能重复[Outline radius?](http://*.com/questions/5394116/outline-radius) –