Home > Article > Web Front-end > What are the new border attributes in css3?
What are the new border attributes in css3?
- WBOYOriginal
- 2021-12-16 16:56:172721browse
New border attributes in css3: 1. "border-image", which is an abbreviated attribute used to set the style of the element's border; 2. "border-radius", which is used to set the four corners of the element. Rounded corner style; 3. "box-shadow", this attribute is used to set one or more drop-down shadow boxes of the element.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What are the new border attributes in css3
In css3, the new border attributes are: border-image, border-radius and box-shadow property.
1. border-image
The border-image attribute is a shorthand attribute used to set the following attributes:
Examples are as follows:
<html>
<head>
<style>
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(/i/border.png) 30 30 round;/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;/* Opera */
border-image:url(/i/border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;/* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>
<p>这是我们使用的图片：</p>
<img src="/i/border.png" alt="What are the new border attributes in css3?" >
<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>
</body>
</html>Output results:
2, border-radius
border- The radius attribute is a shorthand attribute, used to set the rounded style of the four corners. The syntax is as follows:
border-radius: 1-4 length|% / 1-4 length|%;
The example is as follows:
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>Output result:
3. box-shadow
The box-shadow property can set one or more drop-down shadow boxes. The syntax is as follows:
box-shadow: h-shadow v-shadow blur spread color inset;
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of What are the new border attributes in css3?. For more information, please follow other related articles on the PHP Chinese website!