Rumah >hujung hadapan web >html tutorial >对话框css3实现方式_html/css_WEB-ITnose
对话框css3实现方式_html/css_WEB-ITnose
- WBOYasal
- 2016-06-21 08:49:07983semak imbas
<style type="text/css"> #box { margin-left:80px; margin-top:20px; padding-left:20px; height: 60px; background: #2aa1c8; position: relative; border-radius:10px; border:1px solid #1c82a3;}#box:before{ content:""; position: absolute; right: 100%; top: 16px; width: 0; height: 0; border-top: 12px solid transparent; border-right: 12px solid #1c82a3; border-bottom: 12px solid transparent;}#box:after { content:""; position: absolute; right: 100%; top: 18px; width: 0; height: 0; border-top: 10px solid transparent; border-right: 10px solid #2aa1c8; border-bottom: 10px solid transparent;} </style> <body class=""> <div style="width:60px;height:60px;background:#ccc;float:left;"></div> <div id="box">对话框</div></body>//before伪类作为三角的边框//此对话框是自适应屏幕大小的 Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS3 border-image介绍_html/css_WEB-ITnoseArtikel seterusnya：圆弧边框设置_html/css_WEB-ITnose