如何实现一个特殊的单面css框效果(代码实例)
程序员文章站
2022-03-25 16:08:48
...
随着CSS3的发展,网络开发的进步已经走向了完美的想象。对于文本和其他用法,CSS drop-shadow可以实现一个好看的效果框,我们直接来看具体的代码。
这是html部分:
<div id="beauty-boxes">Some example text</div>
CSS代码
#beauty-boxes{ transition: all 0.5s ease; position:relative; float:left; width:45%; padding:2px; margin:3px; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0), 0 0 40px rgba(0, 0, 0, 0) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset; -moz-border-radius:4px; border-radius:4px; } #beauty-boxes:before, #beauty-boxes:after { content:""; position:absolute; z-index:-3; bottom:15px; left:12px; width:50%; height:20%; max-width:350px; max-height:90px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } #beauty-boxes:after { right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }.beauty-boxes p { font-size:16px; font-weight:bold; } #beauty-boxes:hover{ background-color:#161616; color:#fff; }
效果如下:
以上就是如何实现一个特殊的单面css框效果(代码实例)的详细内容,更多请关注其它相关文章!
上一篇: 使用node如何实现重命名文件函数
下一篇: javascript怎样做出决策树
推荐阅读
-
CSS3如何实现文字向右循环闪过效果以及可在移动端使用的实例代码分享
-
CSS3如何实现文字向右循环闪过效果以及可在移动端使用的实例代码分享
-
纯CSS实现气泡对话框尖角效果的实例代码
-
css如何实现渐变效果?css背景色渐变与文字渐变效果的实现(代码实例)
-
CSS如何重置样式?CSS样式重置效果的实现(代码实例)
-
如何实现一个特殊的单面css框效果(代码实例)
-
css3如何实现图片的高斯模糊效果?CSS3 Filter(滤镜)实现(代码实例)
-
css如何实现二级菜单效果?水平、垂直菜单的实现(代码实例)
-
纯CSS实现气泡对话框尖角效果的实例代码
-
css如何实现二级菜单效果?水平、垂直菜单的实现(代码实例)