优艾设计网

css写的六边形怎么加边框阴影?

优艾设计网 https://www.uibq.com 2023-04-19 17:42 出处:网络 作者:磨皮美容教程
怎么给上下两个三角形加上边框阴影? <div class=\"hexagon\"> <div class=\"top\"></div> <div class=\"bottom\"></div> </div>` <style type=\"text/css\"> .hexagon{

怎么给上下两个三角形加上边框阴影?

<div class="hexagon"> <div class="top"></div> <div class="bottom"></div> </div>` <style type="text/css"> .hexagon{ position: relative; display:inline-block; margin-right: 20px; width: 200px; height: 120px; background-color: #fff; -moz-box-shadow: 0 0 20px #ffffd; -webkit-box-shadow:0 0 20px #ffffd; box-shado优艾设计网_Photoshop论坛w: 0 0 20px #ffffd; text-align: center;} .hexagon .top{ width: 0;height: 0; position:absolute; left:0; top:-60px; border-bottom:60px solid #fff; border-left:100px solid transparent; border-right:100px solid transparent; } .hexagon .bottom{ width: 0;height: 0; position:absolute; bottom:-60px; border-top:60px solid #fff; border-left:100px solid transparent; border-right:100px solid transparent; } .hexagon .img{ width: 200px;height: 120px; display: table-cell;vertical-align:middle;text-align:center;*display: block;*font-size: 120*0.873;*font-family:Arial; } </style>


u_109519215 2022-07-17 18:55

优艾设计网_PS百科

当然, 你也可以直接切图.


永远的MC_2020 优艾设计网_Photoshop问答 2022-07-17 18:58

如果不考虑只CSS, 使用 iconfont 可以给字体加 text-shadow, 但只支持 SVG 的 iconfont 不行.


0

精彩评论

暂无评论...
验证码 换一张
取 消