我怎样才能像这样在图标周围添加边框？(HTML/CSS)

Question

What will be the code for such kind of border

Answer 1

试试这个

Html

<div class="wrapper">
  <div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div><div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div>
    <div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div><div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div>

  </div>

Css

#container_2 {
  width: 80px;
  height: 80px;
  margin:16px;
  float:left;
  border: 1px solid red;
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -moz-transform: rotate(45deg);   /* Firefox */
    -ms-transform: rotate(45deg);   /* IE 9 */
    -o-transform: rotate(45deg);   /* Opera */
    transform: rotate(45deg);
}
.wrapper
{
  padding:20px;
  border:1px solid black;
  float:left;

}
img
{
  -webkit-transform: rotate(-45deg); /* Safari and Chrome */
    -moz-transform: rotate(-45deg);   /* Firefox */
    -ms-transform: rotate(-45deg);   /* IE 9 */
    -o-transform: rotate(-45deg);   /* Opera */
    transform: rotate(-45deg);
    position: absolute;
    top: 21px;
    left: 21px;
}

演示 Here

#container_2 {
  width: 80px;
  height: 80px;
  margin:16px;
  float:left;
  border: 1px solid red;
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -moz-transform: rotate(45deg);   /* Firefox */
    -ms-transform: rotate(45deg);   /* IE 9 */
    -o-transform: rotate(45deg);   /* Opera */
    transform: rotate(45deg);
}
.wrapper
{
  padding:20px;
  border:1px solid black;
  float:left;
  
}
img
{
  -webkit-transform: rotate(-45deg); /* Safari and Chrome */
    -moz-transform: rotate(-45deg);   /* Firefox */
    -ms-transform: rotate(-45deg);   /* IE 9 */
    -o-transform: rotate(-45deg);   /* Opera */
    transform: rotate(-45deg);
    position: absolute;
    top: 21px;
    left: 21px;
}

<div class="wrapper">
  <div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div><div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div>
    <div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div><div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div>
    
  </div>

我怎样才能像这样在图标周围添加边框？(HTML/CSS)

How can I give border around the icon like this one?(HTML/CSS)

html

css

border