CSS3 border
Today we mainly study the border (Border) in CSS3. This is no stranger to us. How many times have we written border:1px solid red... So what surprises will CSS3 bring us?
In CSS3, the border has 4 new features
Border-color(Set the border color)
Border-image( Set as border through picture)
Border-radius(radius of border)
box-shadow(shadow effect)
With CSS3 you can create rounded borders, add shadow boxes, and images as borders without using a design program
##CSS3 Rounded border-radius property
CSS3 rounded corners only need to set one property: border-radius (meaning "border radius"). You provide a value for this property to set the radii of all four corners at the same time. All legal CSS measurements can be used: em, ex, pt, px, percentage, etc.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:yellow;
width:300px;
height:300px;
border-radius:25px 15px 40px 0;
}
</style>
</head>
<body>
<div>观察4个角的不同 </div>
</body>
</html>CSS3 box-shadow box-shadow property
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-box-shadow:5px 2px 6px black;
-ms-box-shadow:5px 2px 6px black;
-wekit-box-shadow:5px 2px 6px black;
-o-box-shadow:5px 2px 6px black;
box-shadow:5px 2px 6px black;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-shadow样式</div>
</body>
</html>CSS3 border-imageBorder-image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.border_test
{
-webkit-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-moz-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-o-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-ms-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
display: block;
border-width: 0 12px;
padding: 10px;
text-align: center;
font-size: 26px;
text-decoration: inherit;
color:white;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-image样式</div>
</body>
</html>- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~ 