简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
CSS3 border凹陷该如何编写？
黄舟
黄舟 2017-04-17 11:13:22
0
4
872

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

黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全員に返信(4)
左手右手慢动作
左手右手慢动作2017-04-17 11:15:22 4棟

我的思路：绝对定位+after/before伪类实现,大致实现的效果如下：

TZ可以参见给的demo自行修改一下：在线demo
いいねを押す +0
返信を追加
Peter_Zhu
Peter_Zhu2017-04-17 11:15:22 3棟

如果换个思路的话，可以把那个圆的margin设置成背景色，然后盖住右侧，这样看上去就像是凹进去的效果了。
いいねを押す +0
返信を追加
刘奇
刘奇2017-04-17 11:15:22 2棟

首先更正一下一楼的答案，after/before是伪元素而不是伪类，这个很重要，不能把这个弄混淆了，如果是我我会用一个大圆覆盖长条，再用小圆覆盖大圆就好了
いいねを押す +0
返信を追加
巴扎黑
巴扎黑2017-04-17 11:15:22 1棟 
<!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>
いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！