css - 边框凹陷效果怎么实现
PHP中文网
PHP中文网 2017-04-17 11:32:59
[CSS3讨论组]

如图这种凹陷效果的分割线,用css3怎么实现

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(3)
阿神

box-shadow:0 1px 0 rgba(0,0,0,.2) inset,0 -1x 0 rgba(255,255,255,.2) inset;
交换1px与-1px可以凸起;高亮和暗边是半透明了;不用考虑颜色了;

PHPz

嗯,谢谢 @golden_freeman_china 的提示。

box-shadow: inset 0 -1px 0 rgba( 255, 255, 250, 0.6), 
            inset 0 -2px 0 rgba( 0, 0, 0, 0.1);
黄舟

:before,:after{
border:1px solid yellow;

}

伪元素配合两个border就可以实现,两个border的颜色是关键

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号