html 使用CSS更改图像的大小，为其添加边框并更改其样式和边框半径

Posted 2021-05-11

<style>
  .rounded-border {
    border-radius: 50px;
  }
</style>

<img  class='rounded-border' 
      src='https://bit.ly/fcc-kittens'/>

<style>
  .smaller-image{
    width:100;  
  }
</style>

<img src='https://bit.ly/fcc-kittens' class="smaller-image"/>

<img
    src='https://bit.ly/fcc-kittens'
    alt="A cute orange cat lying onits back"/>

<style>
  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 25px;
  }
</style>

<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>

<style>
  .thick-border {
    border-width: 10px;
    border-style: solid;
  }
</style>

<img class='thick-border' 
     src='https://bit.ly/fcc-kittens'/>