How to achieve raised border in css3-CSS Tutorial-php.cn

How to achieve raised border in css3

WBOY

Release： 2021-12-16 11:13:29

Original

5103 people have browsed it

In CSS, you can use the "border-style" attribute to achieve a raised border style. This attribute is used to set the style of the element border. When the value of the attribute is "outset", you can set the element border to be convex. Starting from , the syntax is "element {border-style:outset;}".

How to achieve raised border in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to achieve raised borders in css3

In css, if you don’t want to achieve a raised border style, you need to use border-style Attributes.

The border-style attribute is used to set the style of all borders of an element, or to set the border style for each side individually.

When the attribute value is set to outset, define the 3D outset border, which is the raised style

The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:pink;
            border-style:outset;
            border-width:5px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copy after login

Output result:

How to achieve raised border in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of How to achieve raised border in css3. For more information, please follow other related articles on the PHP Chinese website!