Home > Article > Web Front-end > Hu Bojun talks about the various effects of borders in CSS3_html/css_WEB-ITnose
Hu Bojun talks about the various effects of borders in CSS3_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:12843browse
The following is the CSS3 definition of rounded corners:
#main{
margin:20px;
border:1px solid #E1E1E1;
-moz-border-radius:5px;-webkit-border- radius:5px;border-radius:5px;
padding:20px;
}
< div id="main">
The following is the css3 definition border shadow:
Example
Add box-shadow to a div element:
div
{
box-shadow: 10px 10px 5px #888888;
}
The following is set as an image border in css3:
Use an image to create a border around a div element:
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 round ; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Welcome to watch my full set of free online Java teaching ultra-clear videos:
http://v.youku.com/ v_show/id_XODQ1NjU0NDc2.html This is one of the video links. You can drag it to the bottom of the Youku video and subscribe to my account, because I will have more videos for free in the future
Baidu search: enter Fcs_D key Coders, or enter "Hu Bojun" to see many of my videos
or add my WeChat ID: fcsboy I can notify you in time via WeChat
QQ learning group: 237053693