CSS3 fillet border and border picture effect instance sharing

The main points of this study are as follows:

• Rounded Corners Border-radius
• Box Shadow Box-shadow
• Border Picture Border-image

1. Fillet Border-radius

The <div>border-radius property allows you to add rounded borders to elements! </div>    Div {       width:200px;       height:100px;       padding:20px;       border:1px solid red;       border-radius:25px;      }

2. Box Shadow Box-shadow

<div></div>    Div {       width:200px;       height:100px;       background:red;       /*x axis offset y-axis offset blur degree shadow color */       box-shadow:10px 10px 5px #000;   }

3. Border Picture Border-image

HTML section

<p><b> Note: </b> Internet Explorer does not support the Border-image property.  the </p> <p> border-image property is used to set the border of a picture. </p>    <div id= "Round" > here, the image is tiled (repeated) to fill the area. </div>  <br>  <div id= "Stretch" > here, the image is stretched to fill the area. </div>    <p> This is the picture material we use:</p>  

CSS Section

div {width:250px;       padding:10px 20px;   border:15px solid translate; } #round {/*safari*//* picture source picture The width of the inward offset picture is used to specify the amount of Border-image-area to draw outside the border */-webkit-border-image : URL (...       /images/border.png) round; /*opera*/-o-border-image:url (..       /images/border.png) round; Border-image:url (..   /images/border.png) round; } #stretch {-webkit-border-image:url (..       /images/border.png) stretch; -o-border-image:url (..       /images/border.png) stretch; Border-image:url (..   /images/border.png) stretch; }