css样式常见图形效果展示的实例代码

/*太极阴阳图形*/ .yin-yang { width: 96px; height: 48px; background: #eee; border-color: #000; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; } .yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; background: #eee; border: 18px solid #000; border-radius: 100%; width: 12px; height: 12px; } .yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: #000; border: 18px solid #eee; border-radius: 100%; width: 12px; height: 12px; }

Talk Bubble（聊天框）

/*聊天框*/ .talkbubble { width: 120px; height: 80px; margin-left: 20px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }

Magnifying Glass（放大镜）

/*放大镜*/ .magnifying-glass { font-size: 10em; /* This controls the size. */ display: inline-block; width: 0.4em; height: 0.4em; border: 0.1em solid red; position: relative; border-radius: 0.35em; } .magnifying-glass::before { content: ""; display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em; border-width: 0; background: red; width: 0.35em; height: 0.08em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }

到此这篇关于css样式常见图形效果展示的文章就介绍到这了,更多相关css样式图形效果展示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!