首页 > 代码库 > Travelling and rounded pictures

Travelling and rounded pictures

     First Iwant to talk about my enjoyable travelling holidays of the National Day.It is always happy when you meeting your family members after leaving them for a quite long days,obviously it‘s the same to me.We travel to many places like Shanghai,Nanjing,Hangzhou and Suzhou. Above all the places, what I like most is Hangzhou. In Hangzhou, we see the West Lake, of course with many many people, I was deeply touched by the beautiful Broken Bridge and the moving love story. Imaging what would happend at that time. While Shanghai unquestionable is very modern and international,I don‘t want to talk anymore about it.

    Then go on to some professional techniques. In html and css, to make the pages look more beautiful, so there is a need for you to change the pictures that used in your webs, In other words, it is just to make it become rounded pictures. Today, I want to share everyone about this skills or say methods.

    All the properties it used is just border-radius. For example, when you set this property like "border-radius: 15px",

  to 

you only need to give this property one value, and it can both change the horizontal radius and the vertical radius of every  fillet .

     When you just set one value,it will set four fillets of pictures by default. However,if you want to set two values,it represent you set the upper left fillet and lower right fillet as the first value, meanwhile you use the second value to confirm the  upper right fillet and lower left fillet.

          For example:

                 border-radius: 15px 5px;

                   

      Also other scenario,you set three values. At this case, the upper left fillet of the picture uses the first value,while the upper right and the low left fillets of picture use the second value,and the remaining fillet,just the low right fillet is setted by the last value.

            Just like the example below:

                 border-radius: 15px 5px 25px;

                 

      And so on,the last scenario is to set both four values.And this one is easier than other three cases, you only suggested to remember that the order is clockwise. For example:

       border-radius: 15px 5px 25px 0px;

               

   It just a part of this property,and I will introduce more about it next time.

  

Travelling and rounded pictures