CSS3 border
With CSS3, you can create rounded borders, add shadow boxes, and images as borders without using a design program such as Photoshop.
In this chapter, you will learn about the following border properties:
border-radius
box-shadow
border-image
CSS3 Rounded Corners
Adding rounded corners in CSS2 is tricky. We had to use different images in every corner.
In CSS3, it is easy to create rounded corners.
In CSS3 the border-radius property is used to create rounded corners:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>border-radius 属性允许您为元素添加圆角边框！ </div>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
CSS3 box shadow
The box-shadow property in CSS3 is used to add a shadow:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
CSS3 border image
Yes With the CSS3 border-image property, you can create a border using an image:
Creating a border using an image in a div:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round
{
-webkit-border-image:url(../style/images/border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(../style/images/border.png) 30 30 round; /* Opera */
border-image:url(../style/images/border.png) 30 30 round;
}
#stretch
{
-webkit-border-image:url(../style/images/border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(../style/images/border.png) 30 30 stretch; /* Opera */
border-image:url(../style/images/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>
<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>
<p>这是我们使用的图片素材：</p>
<img src="/images/border.png" />
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
New border properties
| Properties | Description | CSS |
|---|---|---|
| border-image | Settings Shorthand property for all border images. | 3 |
| border-radius | A shorthand property for setting all four border-*-radius properties | 3 |
| Append the shadow of one or more drop-down boxes | 3 |
##
