Home > Q&A > body text

CSS3 border凹陷该如何编写？

本人新手，请问各位大神，如此，该如何编写CSS3 ？（我说的是蓝色的部分）谢谢了~~

黄舟2824 days ago1010

reply all(4)I'll reply

ringa_lee2017-04-17 11:15:22

My idea: absolute positioning + after/before pseudo-class implementation, the approximate effect is as follows:

TZ can refer to the demo given and modify it yourself: online demo

天蓬老师2017-04-17 11:15:22

If you change your mind, you can set the margin of the circle to the background color, and then cover the right side, so that it looks like a concave effect.

怪我咯2017-04-17 11:15:22

First of all, let me correct the answer on the first floor. After/before are pseudo-elements rather than pseudo-classes. This is very important. Don’t confuse this. If it were me, I would cover the strip with a big circle and then a small circle. Just be nice

巴扎黑2017-04-17 11:15:22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>css</title>
</head>
<body>
<style>
#a {
    width: 150px;
    height: 300px;
    background: radial-gradient(circle at top left,
    transparent 15px, #e6e4b7 0) top left,
    radial-gradient(circle at top right,
            transparent 15px, #e6e4b7 0) top right,
    radial-gradient(circle at bottom right,
            transparent 15px, #e6e4b7 0) bottom right,
    radial-gradient(circle at bottom left,
            transparent 15px, #e6e4b7 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    padding: 20px 24px 22px 20px;
}
#b {
    display: block;
    background: radial-gradient(circle at top left,
    transparent 15px, red 0) top left,
    radial-gradient(circle at top right,
            transparent 15px, red 0) top right,
    radial-gradient(circle at bottom right,
            transparent 15px, red 0) bottom right,
    radial-gradient(circle at bottom left,
            transparent 15px, red 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    width:100%;
    height: 100%;
    padding: 2px;
}
#b:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: radial-gradient(circle at top left,
    transparent 15px, #e6e4b7 0) top left,
    radial-gradient(circle at top right,
            transparent 15px, #e6e4b7 0) top right,
    radial-gradient(circle at bottom right,
            transparent 15px, #e6e4b7 0) bottom right,
    radial-gradient(circle at bottom left,
            transparent 15px, #e6e4b7 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
</style>

    <p id="a">
        <p id="b"></p>
    </p>
</body>
</html>

Cancelreply