HTML中的彎曲按鈕輪廓CSS

-4

我想圍繞按鈕進行輪廓。但作爲默認而不是彎曲，它將以矩形形狀出現。請引導我使用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>

來源

2016-12-27 Velmurugan

可能重複[Outline radius？]（http://stackoverflow.com/questions/5394116/outline-radius） –

-1

border-radius會做的伎倆。

RE：這是因爲outline試圖刪除該行。

來源

2016-12-27 06:24:12

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>

希望這有助於！

來源

2016-12-27 06:28:02

根據我的指導說明，我不應該使用箱形陰影。沒有箱子陰影我應該做輪廓。 – Velmurugan

本地這是不可能的。 Firefox有一個屬性-moz-outline-radius，但並不受所有瀏覽器支持。

你可以看看這篇文章的多邊界幫助，它有各種技術。

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

來源

2016-12-27 06:28:07 KAD

嘗試加入引導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>

來源

2016-12-27 10:44:25

HTML中的彎曲按鈕輪廓CSS

回答

相關問題