What are the new border attributes in css3?-CSS Tutorial-php.cn

What are the new border attributes in css3?

WBOY

Release： 2021-12-16 16:56:17

Original

2738 people have browsed it

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.

What are the new border attributes in css3?

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:

What are the new border attributes in css3?

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>

Copy after login

Output results:

What are the new border attributes in css3?

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|%;

Copy after login

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>

Copy after login

Output result:

What are the new border attributes in css3?

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;

Copy after login

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>

Copy after login

Output result:

What are the new border attributes in css3?

(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!